Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Question: Excluding antd lib normalize.less from the build #4998

Closed
DogAndHerDude opened this issue Feb 22, 2017 · 9 comments
Closed

Question: Excluding antd lib normalize.less from the build #4998

DogAndHerDude opened this issue Feb 22, 2017 · 9 comments

Comments

@DogAndHerDude
Copy link

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.

@benjycui
Copy link
Contributor

Try webpack external.

@benjycui
Copy link
Contributor

But it may break antd's components' style.

@robessog
Copy link

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.

@benjycui
Copy link
Contributor

But it may break antd's components' style.

Actually, we can adopt antd's components gradually, for normalize.css and some resets will affect your own styles...

@jimzer
Copy link

jimzer commented May 27, 2017

The issue is still not solved. Can you point out to the solution please ?

@GuillaumeLeclerc
Copy link

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

@benjycui benjycui mentioned this issue Jun 23, 2017
29 tasks
@byjay
Copy link

byjay commented Jun 24, 2017

reset.css has impact on my code ....

@HZSamir
Copy link

HZSamir commented Sep 10, 2017

Is there any progress on this issue?

@afc163
Copy link
Member

afc163 commented Sep 11, 2017

trace #5851

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

8 participants