升级之后，打包出来的样式文件顺序出现问题。

[17biubiu]

Version

4.5.8

Environment info

Environment Info:

  System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
  Binaries:
    Node: 10.23.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.8 - /usr/local/bin/npm
  Browsers:
    Chrome: Not Found
    Edge: Not Found
    Firefox: Not Found
    Safari: 14.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1
    @vue/babel-helper-vue-transform-on:  1.0.0-rc.2
    @vue/babel-plugin-jsx:  1.0.0-rc.3
    @vue/babel-plugin-transform-vue-jsx:  1.2.1
    @vue/babel-preset-app:  4.5.8
    @vue/babel-preset-jsx:  1.2.4
    @vue/babel-sugar-composition-api-inject-h:  1.2.1
    @vue/babel-sugar-composition-api-render-instance:  1.2.4
    @vue/babel-sugar-functional-vue:  1.2.2
    @vue/babel-sugar-inject-h:  1.2.2
    @vue/babel-sugar-v-model:  1.2.3
    @vue/babel-sugar-v-on:  1.2.3
    @vue/cli-overlay:  4.5.8
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.8
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.8
    @vue/cli-plugin-router: ~4.5.0 => 4.5.8
    @vue/cli-plugin-vuex: ~4.5.0 => 4.5.8
    @vue/cli-service: ~4.5.0 => 4.5.8
    @vue/cli-shared-utils:  4.5.8
    @vue/component-compiler-utils:  3.2.0
    @vue/eslint-config-standard: ^5.1.2 => 5.1.2
    @vue/preload-webpack-plugin:  1.1.2
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^6.2.2 => 6.2.2
    vue: ^2.6.11 => 2.6.12
    vue-eslint-parser:  7.1.1
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.9.5 (16.0.0-rc.1)
    vue-router: ^3.2.0 => 3.4.9
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.11 => 2.6.12
    vue-template-es2015-compiler:  1.9.1
    vuex: ^3.4.0 => 3.5.1
  npmGlobalPackages:
    @vue/cli: 4.5.8

Steps to reproduce

1、基于vue-cli创建一个项目。选择less 2、在views下创建一个test.less文件，

.hello .test-font{
  color: green;
}

然后在Home里引入。如下：

<style lang="less">
  @import "~@/views/test";
</style>

3、helloword.vue里在div.hello下加入一个

<div class="test-font">卡卡卡卡卡卡卡卡</div>

<style scoped lang="less">
.test-font{
  color: purple;
}
</style>

启动服务

What is expected?

在之前的vue-cli2版本里输出的样式是

.hello .test-font {
    color: green;
}
.test-font[data-v-469af010] {
    color: purple;
}

What is actually happening?

vue-cli4版本里输出的是

.test-font[data-v-469af010] {
    color: purple;
}
.hello .test-font {
    color: green;
}

[dota17]

it seems that the sort of css content in file depend on webpack。 if you add import css from './views/test.less'; before import HelloWorld from './components/HelloWorld.vue'; you will get .hello .test-font { color: green; } at the first

[17biubiu]

it seems that the sort of css content in file depend on webpack。 if you add import css from './views/test.less'; before import HelloWorld from './components/HelloWorld.vue'; you will get .hello .test-font { color: green; } at the first

按照你说的这样，还是不行。不过我用的下面这种可以，但是和之前出入有点大啊，我升级之后需要改动大量的文件。

[githoniel]

do not rely on style order to override since mini-css-extract-plugin should keep order but it's sort function often broken.

https://github.com/webpack-contrib/mini-css-extract-plugin/issues/657