• 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