• Home
  • home > tools > Bundler > webpack >

    webpack抽离css，mini-css-extract-plugin Conflicting order

    Author：zhoulujun Date：

    打包输出的时候，报：mini-css-extract-plugin Conflicting order 。其实是在js里css的引入顺序导致的问题，多个css的在js里的引入顺序不同，就会提示这个警告。

    打包输出的时候，报：mini-css-extract-plugin Conflicting order 

    网上说 升级一下 mini-css-extract-plugin 版本就能解决问题，其实并没有啥卵用，自己找了下解决方案

    矫正css引入顺序


    其实就是css 引入属性问题

    在js里css的引入顺序导致的问题，多个css的在js里的引入顺序不同，就会提示这个警告。

    例如：在1.js 里，引入的顺序是a.css, b.css; 在2.js里，引入顺序是b.css,a.css, 出现了这种引入顺序不同，就导致了警告。

    在两个js里把引入顺序调成一致，就没问题了。

    所以在1.js和2.js里的引入顺序都调整成a.css, b.css 就没有那个警告了。

    其实原因很简单

    如果 plugin 选择将 a.css 放在 b.css 的前面，那么就不满足 2.js 的使用顺序；反之则不满足 1.js 的。

    正是在这样的“矛盾”情况下，plugin 输出了一个 Warning，并选择了一个相对最优的解。

    这个一个个去解决很蛋疼

    所以，先找一个取巧的办法

    修改配置

    修改webpack 插件，MiniCssExtractPlugin配置

    plugins: [
  new MiniCssExtractPlugin({
    // ......
    ignoreOrder: true
  }),
],

    vue-cli配置，修改vue.config.js 配置

    const config = {
  publicPath: process.env.PUBLIC_PATH,
  outputDir: process.env.OUTPUT_DIR,
  indexPath: process.env.INDEX_PATH,
  productionSourceMap: process.env.NODE_ENV !== 'production',
  integrity:true,
  css: {// 增加配置项 ,
    extract: {
      ignoreOrder: true
    },
}

    待项目空闲之余，还是去掉ignoreOrder 保险

    参考文章：

    Conflicting order in mini-css-extract-plugin https://laysent.com/til/2019-11-28_conflicting-order-in-mini-css-extract-plugin

    mini-css-extract-plugin Conflicting order 警告解决  https://blog.csdn.net/peade/article/details/84890399







    转载本站文章《webpack抽离css，mini-css-extract-plugin Conflicting order》,
    请注明出处：https://www.zhoulujun.cn/html/tools/Bundler/webpack/2019_0911_8589.html

    收藏
    上一篇：webpack+eslint全局变量设置
    下一篇：webpack打包之文件Gzip压缩与Brotli压缩配置
    延伸阅读：