-
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 ordering between dev and build #1885
Comments
Update, I tried the GlobalLayout approach (code available in the globallayout branch)
Try both dev and build, show me a consistent output Which means the css order as below,
Well, at least it was consistent this time, but I'm looking for a way to load scss after (override) |
Update, I tried another test, this time even simpler. (code available at no-custom-layout branch)
In dev mode, the navbar is black, means component style (even it's a component @parent-theme), overrides local theme
In build mode, the navbar is red, means local theme
The behaviour is inconsistent between dev and build. |
Not sure, but seems to be a |
This is hitting me as well; not sure what to add beyond the "me too". I encounter this with both nodejs 10 and nodejs 12. They layout problems show up for me both in the top nav bar as well as the sidebar background color, which makes the site unreadable. All my style changes are in Here's my
|
I just encounter this as well. I'm glad to see other face this issue as well. I didn't dig deep into this yet, however it seems that the CSS output is rearanged during build somehow, so @kefranabg assumption could be true. Is there a way to disable this CSS plugin for a test? |
I tried upgrading mini-css-extract-plugin to the current version 0.8.0, but this didn't change anything. |
Still a (big) problem... any hope to see a fix for this soon? Environment Info:
System:
OS: Linux 5.3 Ubuntu 19.10 (Eoan Ermine)
CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
Binaries:
Node: 13.7.0 - /usr/bin/node
Yarn: 1.21.1 - /usr/bin/yarn
npm: 6.13.6 - /usr/bin/npm
Browsers:
Chrome: Not Found
Firefox: 72.0.2
npmPackages:
@vuepress/core: 1.2.0
@vuepress/theme-default: 1.2.0
vuepress: ^1.2.0 => 1.2.0
npmGlobalPackages:
vuepress: Not Found |
Bug report
This issue is similar to #643, when overriding default theme, the css order is inconsistent between dev and build. However #643 is solved and closed. So this may be a new issue.
Steps to reproduce
https://github.com/favoyang/netlify-vuepress-test
I've made a minimal reproduced repo
styles/index.styl
, which styles paragraph to red.styles/custom.scss
, which styes paragraph to blue.layouts/Layout.vue
, which overrides@parent-theme/layouts/Layout.vue
, and loadsstyles/custom.scss
in a style tag.That's it. Let's try compare
yarn docs:dev
withyarn docs:build
What is expected?
I would expect in such setup the css order as below (higher overrides lower)
Then in either dev or build, the paragraph will be blue.
What is actually happening?
In dev, the paragraph is blue.
In build, the paragraph is red. (you can also check on https://netlify-vuepress-test.netlify.com/)
It actually doesn't matter which order is correct, but it should be consistent.
Other relevant information
custom.scss
is that I intended to load a 3rd-party css framework in scss format, and use it to override default theme styling.npx vuepress info
in my VuePress project:The text was updated successfully, but these errors were encountered: