Question: Excluding antd lib normalize.less from the build

This is rather a question than an issue by itself.

I’ve built a small plugin for a third party service. This plugin uses antd for its design elements. However, the natural problem is that antd includes normalize.less into the final build, which in turn messes with the original page css settings by overriding them.

Would there be a way to specify a means to exclude specific *.less files?

One of the solutions that I currently am using is just reading the document.head and picking the generated style node, where I just clean up the unnecessary CSS through regex. But it seems like a hassle to run a prep script each before each initialisation of the app.

[GuillaumeLeclerc]

This issue should definitely not be closed. The problem is real and persists. The styles should be prefixed and not affect the entire page.

[robessog]

Hi @benjycui

We try to use antd in a quite large enterprise applicationm, but when antd gets applied it inserts normalize.css into the DOM without any namespacing or so. Thus e.g. our <a> tag gets its blue color from normalize.css, and other elements also get undesired box-sizing and so. This messes up our layout in some places. We don’t really have the option to restyle every page. The best would be if we somehow could exclude it from the javascript bundle created by webpack. Or if you could wrap it into a CSS class that would be also a big help.

Can you please provide me an example for your suggestion:

Try webpack external.

I’ve tried to exclude it from less/style loader like this but it did not work: { test: /\.less$/, loader: "style-loader!css-loader!less-loader", exclude: /normalize/ }

What should be written to the externals? We have these currently in it: externals: { "react": "React", "react-dom": "ReactDOM", "antd": "Antd", "lodash": "_", }

Thanks in advance.