chunk chunk-commons [mini-css-extract-plugin]解决方案

问题描述

vue2.0项目，在执行yarn build打包的时候，控制台报错：

• warning
• chunk chunk-commons [mini-css-extract-plugin]
• Conflicting order. Following module has been added:
• 这里是错误相关的.vue文件

原因分析

vue在生产环境会开启mini-css-extract-plugin插件，当css引入顺序不一致（例如vue组件的引入顺序）就会报出该警告。

解决方案

在vue.config.js文件中加入对css相应配置

module.exports = defineConfig({
    // 其它配置...,
    css: {
        extract: {
          ignoreOrder: true
        }
    }
}）

常见问题 Q：在配置好后，之前加的样式不生效了，

<div class="login-form">
    <el-button round :loading="loading" @click="handleLogin" class="submit-btn" :disabled="loading">登录</>
</div>

css部分

<style lang="scss" scoped>
.submit-btn {
    width: 100%;
    height: 40px;
    font-size: 18px;
    background: #000;
    color: #fff;
    border: 0;
 }
</style>

这时，.submit-btn的样式没有生效，因为mini-css-extract-plugin把样式抽离出来了，这时.submit-btn的样式权重没有.el-button高，所以显示的是.el-button的样式，只需要提高.submit-btn样式的权重即可：

<style lang="scss" scoped>
.login-form {
    .submit-btn {
        width: 100%;
        height: 40px;
        font-size: 18px;
        background: #000;
        color: #fff;
        border: 0;
     }
}