Vuepress: Default theme CSS order inconsistent between dev and build

Created on 12 Jul 2018 · 12Comments · Source: vuejs/vuepress

Bug report

In local dev, theme.styl content is inlined after theme component css (f.e. from Navbar.vue) in the head, whereas in the built version the theme.styl content is placed before any component css in the 0.styles.xxxxxxx.css file

This results in the Navbar becoming position: relative instead of position: fixed in the built version and scrolling with the page. There are probably more issues stemming from this, but the Navbar is what tipped me off.

Version

0.11.0

Steps to reproduce

yarn docs:dev
yarn docs:build
deploy the build somewhere

What is expected?

The navbar is position: fixed in both dev and build

What is actually happening?

The navbar is position: relative in the built version

Other relevant information

Your OS: MacOS 10.13.3
Node.js version: 8.11.3
Browser version: Chrome 67
Local install
Yarn

Source

mattixittam

👍3

Most helpful comment

Here is a bare-bones repo that illustrates this: vuepress-issue-643

Hopefully the difference between the sidebar links in dev vs build are obvious.

With yarn dev:
with-yarn-dev

With yarn build:
with-yarn-build

I've added a commented-out section in the config.js that seems to resolve the issue (in this instance at least).

Let me know if that helps or if you need anything else.

ricnic on 7 Aug 2018

👍4

All 12 comments

Could you provide a reproduction repo link for me to investigate? Thanks.

ulivz on 12 Jul 2018

I'm having trouble reproducing it in a minimal repro, will dig some more.

mattixittam on 12 Jul 2018

Couldn't construct a repro. Did find that commenting out this fixes the problem:

config.optimization.splitChunks({
      cacheGroups: {
        styles: {
          name: 'styles',
          // necessary to ensure async chunks are also extracted
          test: m => /css-extract/.test(m.type),
          chunks: 'all',
          enforce: true
        }
      }
    })

in lib/webpack/createBaseConfig.js

That produces a range of separate css chunk files, and in the chunk containing the vuepress css, the order is now correct.

I can't show our codebase unfortunately, but the setup we have is vuepress locally installed within projectdir, building docs located in projectdir/docs. From the .md files we load components located in projectdir/src/components. I'm thinking there may be a conflict happening between node_modules from the main project and vuepress?

mattixittam on 12 Jul 2018

I don't know why you cannot construct a repro for an issue that you confirmed. So you just let me to accept a fix for an unreproducible issue?

ulivz on 12 Jul 2018

I don't have a fix, just a workaround which disables some intended vuepress functionality so I wouldn't recommend it (though disabling it through configureWebpack in config.js suffices for our specific use case, I'm not happy about it as it feels brittle).

I cannot reproduce it outside our own codebase, which is not public. I spent several hours today trying to reproduce this in a fresh vue-cli install and couldn't. This is what I meant by not being able to reproduce it. Trust me, I'm not happy either.

My last hunch was that it may have to do with the fact that the project uses vue-loader v12 and vuepress uses v15, but I had to call it and switch to other work. Might be able to do some more digging tomorrow.

mattixittam on 12 Jul 2018

OK, thanks, not sure if this change could give you more ideas: https://github.com/vuejs/vuepress/commit/f9988025352ea52d9cee419bd21906318d3e249d

ulivz on 12 Jul 2018

Can confirm this bug.