Open favoyang opened 4 years ago
Update,
I tried the GlobalLayout approach (code available in the globallayout branch)
layouts/Layout.vue
layouts/GlobalLayout.vue
(copied from official docs), then append the custom.scss
at the end.layouts/GlobalLayout.vue
in theme/index.js as globalLayout
.Try both dev and build, show me a consistent output
Which means the css order as below,
β @theme/styles/index.styl
β @parent-theme/styles/index.styl
β custom.scss (load from layouts/GlobalLayout.vue's style tag)
Well, at least it was consistent this time, but I'm looking for a way to load scss after (override) @theme/styles/index.styl
Update,
I tried another test, this time even simpler. (code available at no-custom-layout branch)
styles/index.styl
to change navbar title to red.
.navbar .site-name
color red
In dev mode, the navbar is black, means component style (even it's a component @parent-theme), overrides local theme index.styl
, css order as below,
β navbar component style (located at @parent-theme/components/Navbar.vue)
β @theme/styles/index.styl
In build mode, the navbar is red, means local theme index.style
overrides component style @parent-theme, css order as below.
β @theme/styles/index.styl
β navbar component style (located at @parent-theme/components/Navbar.vue)
The behaviour is inconsistent between dev and build.
Not sure, but seems to be a mini-css-extract-plugin
bug.
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 .vuepress/styles/palette.styl
and some of them do get picked up correctly, while others don't.
Here's my vuepress info
results (note this is on top of WSL on Windows 10):
Environment Info:
System:
OS: Linux 4.4 Ubuntu 16.04.6 LTS (Xenial Xerus)
CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
Binaries:
Node: 12.11.1 - /usr/bin/node
Yarn: 1.19.1 - /usr/bin/yarn
npm: 6.11.3 - /usr/bin/npm
Browsers:
Chrome: Not Found
Firefox: Not Found
npmPackages:
@vuepress/core: 1.2.0
@vuepress/theme-default: 1.2.0
vuepress: ^1.2.0 => 1.2.0
npmGlobalPackages:
vuepress: Not Found
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? (see my question at https://stackoverflow.com/questions/58977014/how-can-i-disable-the-mini-css-extract-plugin-in-vuepress)
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?
I have plenty of !importants
in my sass code...
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 https://github.com/vuejs/vuepress/issues/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:Environment Info:
System: OS: Windows 10 CPU: (8) x64 Intel(R) Core(TM) i7-2635QM CPU @ 2.00GHz Binaries: Node: 10.16.2 - C:\Program Files\nodejs\node.EXE Yarn: 1.17.3 - C:\Program Files (x86)\Yarn\bin\yarn.CMD npm: 6.10.3 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: 44.18362.329.0 npmPackages: @vuepress/core: 1.1.0 @vuepress/theme-default: 1.1.0 vuepress: ^1.1.0 => 1.1.0 npmGlobalPackages: vuepress: Not Found