-
Notifications
You must be signed in to change notification settings - Fork 26.6k
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
Bootstrap 4, CSS Selector order #5121
Comments
Related to #3575 ? |
@hugotox Thanks but it looks like it's related to vercel/next-plugins#59 and webpack-contrib/extract-text-webpack-plugin#200 |
@VeeeneX yeah it's the exact same issue, reading through the extract-text-webpack-plugin issue it mentions mini-css-extact-plugin has fixed this. Next 7 will have webpack 4 + next-css will be using that plugin instead of extract-text-webpack-plugin. You can already try this using I'm going to close this issue as we can't fix this upstream issue on our side. |
@timneutkens I have already tried @canary but it's not fixed yet. I will try to modify webpack configuration. |
@timneutkens, still unable to specify the import order of css/sass files with css-mini-extract-plugin. It seems to be loading them in alphabetical order instead. Is there a solution for this? |
Has anyone had any luck with a solution for this? We just got bit for the first time during a production deploy. I will try to dig into it a bit |
I have the same issue, it doesn't look to be fixed. |
Same issue here, css files imported in _app override my internal component's custom styles. Ended up importing styles in the head component placed in _document. |
As one solution... in my situation, global Bootstrap CSS was overriding Sass CSS Module styles. I fixed this by importing Bootstrap via cdn
in _document.js As opposed to importing it from the library ('bootstrap') in _app.js. This fixed the issue for me. |
This should be fixed with the new CSS support, which is available on canary with the |
Hi @Timer , thanks for the reply - I was wondering how to enable the |
We're referring to the built-in experimental support. Be sure to remove all traces of // next.config.js
module.exports = {
experimental: { css: true }
} You must be on the latest |
@Timer makes sense, thank you! |
This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you. |
Question about Next.js
Questions should be posted on https://spectrum.chat/next-js
I'm not sure whether this is bug/feature/question, so I decided to post this here. So the problem is following: Order of final css is very chaotic and main problem is that I want to have bootstrap at the top of the css. Or inside another file located in .next/css.
_app.js
And
_document.js
:Example component on page:
Brands.scss for that Component
Styles:
And here's the problem, final css located in style has very different order from what would I expect:
next.config.js
The text was updated successfully, but these errors were encountered: