CSS order in build vs. serve --mode production

[albernhagen]

Version

3.7.0

Environment info

Environment Info:

  System:
    OS: Windows 10
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 8.11.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.13.0 - C:\Users\andyb\AppData\Roaming\npm\yarn.CMD
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: 44.17763.1.0
  npmPackages:
    @fortawesome/vue-fontawesome: ^0.1.6 => 0.1.6
    @kazupon/vue-i18n-loader: ^0.3.0 => 0.3.0
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.0.0
    @vue/babel-preset-app:  3.7.0
    @vue/babel-preset-jsx:  1.0.0
    @vue/babel-sugar-functional-vue:  1.0.0
    @vue/babel-sugar-inject-h:  1.0.0
    @vue/babel-sugar-v-model:  1.0.0
    @vue/babel-sugar-v-on:  1.0.0
    @vue/cli-overlay:  3.7.0
    @vue/cli-plugin-babel: ^3.7.0 => 3.7.0
    @vue/cli-plugin-e2e-cypress: ^3.7.0 => 3.7.0
    @vue/cli-plugin-typescript: ^3.7.0 => 3.7.0
    @vue/cli-plugin-unit-jest: ^3.7.0 => 3.7.0
    @vue/cli-service: ^3.7.0 => 3.7.0
    @vue/cli-shared-utils:  3.7.0
    @vue/component-compiler-utils:  2.6.0
    @vue/preload-webpack-plugin:  1.1.0
    @vue/test-utils: ^1.0.0-beta.29 => 1.0.0-beta.29
    @vue/web-component-wrapper:  1.2.0
    jest-serializer-vue:  2.0.2
    svg-to-vue:  0.4.0
    typescript: 3.4.5 => 3.4.5
    vue: ^2.6.10 => 2.6.10
    vue-class-component:  7.1.0
    vue-cli-plugin-i18n: ^0.6.0 => 0.6.0
    vue-cli-plugin-vuetify: ^0.5.0 => 0.5.0
    vue-cli-webpack:  1.0.0
    vue-hot-reload-api:  2.3.3
    vue-i18n: ^8.11.2 => 8.11.2
    vue-i18n-extract:  0.4.13
    vue-i18n-ts:  0.1.0
    vue-jest:  3.0.4
    vue-loader:  15.7.0
    vue-property-decorator: ^8.1.1 => 8.1.1
    vue-recaptcha-v3: ^1.5.0 => 1.5.0
    vue-router: ^3.0.6 => 3.0.6
    vue-style-loader:  4.1.2
    vue-svg-loader: ^0.12.0 => 0.12.0
    vue-template-compiler: ^2.6.10 => 2.6.10
    vue-template-es2015-compiler:  1.9.1
    vuetify: ^1.5.14 => 1.5.14
    vuetify-loader: ^1.2.2 => 1.2.2
    vuex: ^3.1.1 => 3.1.1
    vuex-module-decorators: ^0.9.9 => 0.9.9
    vuex-persist: ^2.0.0 => 2.0.0
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

My code repository is private as it's for my company.

What is expected?

The ordering of CSS assets in the index.html should match when running vue-cli-service build and vue-cli-service serve --mode production.

What is actually happening?

However, the order they are loaded varies, making it difficult to debug styling issues.

[albernhagen]

I just found a solution in #2381 . I had this optimization specified in my vue.config.js. Removing it resolved the issue. It might be worth adding to the documentation. optimization: { splitChunks: { maxSize: 250000 } }

Thank you!