-
-
Notifications
You must be signed in to change notification settings - Fork 4.8k
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
Inconsistent css in dev vs prod #4204
Comments
Reproduced on codesandbox https://codesandbox.io/s/m570wpvv1j |
I'm also seeing this. For the time being I've pinned my version to v2.1.0 of nuxt and it works. |
@spnc-omz Oh, so it worked with 2.1? |
This gets even more weird. I think I had a dependency issue. Everything worked for me after I updated my postcss preset env to ~6.3.0 |
@spnc-omz which exact module are you referring to? I only see |
@adi-zz It will be correct as your expectation if you add <style scoped>
.VueToNuxtLogo {
background-color: blue;
}
</style> |
@clarkdo this is understandable, but sometimes there are use cases when using scoped styles is not an option. e.g. consider a project that was created on top of a vanilla html/css template without any view components to start with, so all those styles are separate scss files bundled in a one big global css chunk that should properly interact with style libraries such as bootstrap that are also connected to the project. |
I understand and I didn't mean that we must use Since the injection of css files is asynchronous, so the order of css files are not guaranteed, the root problem is more related to the way how we should organize css. My point is that it's not a proper way to prioritize styles depending on the order of selector location in file. If we want make a selector prior to another, we should use higher priority selector: // component
<style>
.VueToNuxtLogo {
background-color: red;
}
</style>
// index.vue
<style>
.index .VueToNuxtLogo {
background-color: blue;
}
</style> |
@clarkdo yeah, I also understand that, but you know, people been controlling css priority by defining specific order for years and practically getting rid of this habit will mean rewriting thousands of already existing css selectors whereas just switching the file order will fix it in a finger snap (you don't even need to be a Thanos to do that) |
Thanks for your contribution to Nuxt.js!
Issues that are labeled as |
I'm seeing this issue also. Using the nuxt.config.js We are using 3rd party CSS libraries, of which we create an override style sheet, which needs to be loaded last, and sometimes it is being loaded first. |
Need to find a way to guarantee ordering, without resorting to making a master CSS/SCSS file that imports all 3rd party libraries + custom style overrides |
Wasn't this already been fixed? I had similar issue I logged here #4219 (comment) |
@tmorehouse did you try it with Nuxt 2.4.2? Is it working for you? |
The issue appears to have been fixed. |
Nice! |
And it happening again for "nuxt": "^2.7.1" |
Yes, I'm having the same issue here with inconsistent styling between dev and prod environments. Here's a link to a reproduction: https://codesandbox.io/s/examplenuxtvuetifycssorder-k4ob0
I thought it might be an issue with Can this issue be reopen? |
I am experiencing the problem too. Also using vuetify-loader |
@manniL please, reopen! extractCSS is so buggy that I actually gave up on it, it was easier to reduce styles by 10 times than to fix all issues that keep happening with this property 🤦♂️ |
Please see #4219 |
Styles are different - not using purgecss or any other plugin accept nuxt defaults |
this issues happened to the css which used on the classname/id/element add by javascript, when you run add the css in |
i am using a combination of <style scoped> and inline css computed by JS. |
The fix for me is to add build: {
extractCSS: {
ignoreOrder: false
}
} Hope it will help someone. |
Based on my experience, there are 2 reasons that i know of that makes the css of the built version not consistent with the dev version.
|
Version
v2.2.0
Reproduction link
https://github.com/adi-zz/nuxt-css-dev-vs-prod
Steps to reproduce
What is expected ?
The background color of nuxt logo should be blue in both cases 3.1. and 3.2. (or at least red in both cases).
What is actually happening?
Background is blue in dev mode (3.1.), and red in prod mode (3.2.)
Additional comments?
My project was generated using
npx create-nuxt-app test
(choosing all defaults)The text was updated successfully, but these errors were encountered: