-
-
Notifications
You must be signed in to change notification settings - Fork 4.9k
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
CSS Order is different when extractCSS is used #4219
Comments
Likely related: webpack-contrib/mini-css-extract-plugin#202 |
I noticed this as well. It messes with styling when the selector order is what determines specificity. For instance, we use tiny reset. That should be the very first CSS loaded, but in our case (when using extractCSS), it wasn't – making |
@bjunc yes. As I was mentioning above |
I also experiencing this issue. Any solution on this? @atinux |
Thanks for your contribution to Nuxt.js!
Issues that are labeled as |
Still.. |
@nmfzone even with latest nuxt-edge? |
Looks like it's fixed (https://codesandbox.io/s/github/AndrewBogdanovTSS/nuxt-css-order/tree/master/) |
@manniL Sorry for coming late. I'm not using Nuxt Edge, because it's production environment. So, I must update/upgrade the Vue to make it works? |
@nmfzone Updating Vue should be fine, yes ( |
I checked it on my projects and I can confirm that the bug is fixed! Thanks @manniL |
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. |
This issue reappeared on version 2.3.4, also was able to reproduce it on Nuxt-edge aka 2.4
|
@AndrewBogdanovTSS Any chance that you could track down the commit that broke it? 🤔 |
@AndrewBogdanovTSS That'd be great! We switched to https://github.com/webpack-contrib/extract-text-webpack-plugin in the mean time And the fix came with one of the Vue release IIRC. |
@manniL yes, it may be related as at least 5 more issues I saw when I was looking for some kind of a solution to this problem :) |
Anything new to this problem? |
I have the same issue in production : ( |
@tegola I've looked into your repo, it looks the issue is related to
I found that there already has some discussions in vue-loader: vuejs/vue-loader#808 (comment) vuejs/vue-loader#521 , I'll talk to team and try to figure a proper solution for it. |
Fixed by updating our nuxtjs version to the latest one😃 |
I've just upgraded the test case to nuxt 2.14 and I cannot confirm it's fixed. The issue is still there. |
up. same issue here. nuxt 2.14.1 |
When I set |
I don't understand why this issue was closed despite all the reports of it still happening, after just one comment by someone whose project got fixed with no notes or reproduction example. This is still a very real problem. Would @atinux or someone from the Nuxt team care to reopen this so it can be tracked and hopefully fixed? |
Unfortunately, it was @atinux who closed it -- CSS is important and if it isn't right the entire app can be F'd. Renders |
Can you please take a look at this answer: #4219 (comment) And see if the issue does not come from this? |
@atinux prod and dev should be deterministic for this specific case so no |
Hi @atinux, well it seems it's related with #4219 (comment) but the advice to increase the css specifity from vuejs/vue-loader#808 (comment) is about three and a half years old and there exists no other solution to fix that? Because vuejs/vue-loader#808 was closed and the issue exists furthermore. |
I am still seeing this issue with nuxt 2.15.3, any workaround or quick fix that I can try? |
I have been trying to explain this issue to Vue developers for years. I know this is Nuxt but the root issue comes from something in Vue's webpack setup. The C is CSS stands for cascading, and order is important, so this is a big deal. |
I have this problem because I have a global CSS reset and plugin CSS which must come before any components/pages. Example:
Expected output:
The default nuxt setup with inline styles outputs the correct order, with these files getting output before my pages/layouts, but with extractCSS enabled, the order is very wrong, with pages CSS coming first. I also hope no devs will reply with 'just use important' because that is not what you should be doing for resets and base CSS. |
@alexmalkin I can reply with "don't use extractCSS" 🙂 But I guess this is also not the thing you want to hear. Among other stuff, this issue with the order is what made me switch to TailwindCSS in my workflow and I don't regret it ever since. Maybe you should try it too? |
The issue with extractCSS -> wrong CSS order still exists and has not been fixed according to the last merge. |
The issue still persists. In my very specific case, this started happening when I used an auto-imported button component in my default layout. From that point onwards, all of my button styles were being imported before the normalize styles and this broke all the buttons in my app. The solution was to add the button component (among others) to the Relevant snippets
plugins: [
'~/components/my-global-components/init.js',
],
components: [
{
path: '~/components',
ignore: ['./my-global-components/*/**.{vue,js}']
}
],
import Vue from 'vue';
import Button from './button';
export default (context, inject, ...args) => {
Vue.component('my-button', Button);
}; |
@dumptyd disabling nuxt/components is not a solution, maybe you could log a bug at https://github.com/nuxt/components/issues ? |
Version
2.2.0
Reproduction link
https://github.com/AndrewBogdanovTSS/nuxt-css-order
Steps to reproduce
What is expected ?
Swiper active control has orange color and positioned at the bottom http://take.ms/UsNSR
What is actually happening?
Swiper active control has blue color and has a shift of 10px
http://take.ms/ZDjz0
Additional comments?
This issue is happening due to a fact that order of extracted css files is wrong when extractCSS is in use.
vendors.css
is placed afterapp.css
this is causing vendor styles to override stylesheets defined by the userhttp://take.ms/ynVEVK
http://take.ms/D8FH9
The text was updated successfully, but these errors were encountered: