编译警告 chunk common [mini-css-extract-plugin]

[lang-strive]

相关平台

微信小程序

小程序基础库: 2.12.0
使用框架: React

复现步骤

npm run dev:weapp 随后出现 编译警告 . ⚠️ 编译警告.

chunk common [mini-css-extract-plugin]
Conflicting order between:

• css ./node_modules/_css-loader@3.6.0@css-loader/dist/cjs.js??ref--5-oneOf-0-1!./node_modules/_postcss-loader@3.0.0@postcss-loader/src??postcss!./node_modules/_sass-loader@8.0.2@sass-loader/dist/cjs.js??ref--5-oneOf-0-3!./src/components/SwiperModule/index.module.scss
• css ./node_modules/_css-loader@3.6.0@css-loader/dist/cjs.js??ref--5-oneOf-0-1!./node_modules/_postcss-loader@3.0.0@postcss-loader/src??postcss!./node_modules/_sass-loader@8.0.2@sass-loader/dist/cjs.js??ref--5-oneOf-0-3!./src/baseUI/Mask/index.module.scss
• css ./node_modules/_css-loader@3.6.0@css-loader/dist/cjs.js??ref--5-oneOf-0-1!./node_modules/_postcss-loader@3.0.0@postcss-loader/src??postcss!./node_modules/_sass-loader@8.0.2@sass-loader/dist/cjs.js??ref--5-oneOf-0-3!./src/baseUI/BackTop/index.module.scss
• css ./node_modules/_css-loader@3.6.0@css-loader/dist/cjs.js??ref--5-oneOf-0-1!./node_modules/_postcss-loader@3.0.0@postcss-loader/src??postcss!./node_modules/_sass-loader@8.0.2@sass-loader/dist/cjs.js??ref--5-oneOf-0-3!./src/baseUI/Loading/index.module.scss

期望结果

我大概知道是css问题，希望知道怎么解决 是偶尔一次出现的 后面一直就编译警告提示

实际结果

编译警告 chunk common [mini-css-extract-plugin]

环境信息

  Taro CLI 3.0.5 environment info:
    System:
      OS: macOS 10.15.2
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 12.14.0 - /usr/local/node/bin/node
      Yarn: 1.22.4 - /usr/local/node/bin/yarn
      npm: 6.13.4 - /usr/local/node/bin/npm
    npmPackages:
      @tarojs/components: 3.0.5 => 3.0.5
      @tarojs/mini-runner: 3.0.5 => 3.0.5
      @tarojs/react: 3.0.5 => 3.0.5
      @tarojs/runtime: 3.0.5 => 3.0.5
      @tarojs/taro: 3.0.5 => 3.0.5
      @tarojs/webpack-runner: 3.0.5 => 3.0.5
      babel-preset-taro: 3.0.5 => 3.0.5
      eslint-config-taro: 3.0.5 => 3.0.5
      react: ^16.10.0 => 16.13.1
    npmGlobalPackages:
      typescript: 3.8.3

[lang-strive]

[coderkeel]

看报错信息应该是不同组件引用的css重名问题

[luckyadam]

能否提供个 demo 看下

[Chen-jj]

@lang-strive webpack-contrib/mini-css-extract-plugin#250 (comment)

自己调一下 import 顺序吧，大概意思是 mini-css-extract-plugin 需要按引用顺序去生成 css 文件，如果多个文件引入顺序不一就会警告。

[huyong007]

我出现该问题的是引入了AtButton的scss,但是并未引入该组件

We are trying to generate a CSS file but your codebase has multiple possible orderings for these modules.

In this case you used table before button in one location and button before table in another location. We need to generate a single CSS file for these and can't decide which one should be first. In this case we put table before button. But this is chosen without reason. In future build we may decide the other way. But since CSS cares for rule order this can lead to issue when CSS changes without reason.

So not defining a clear order can lead to fragile builds, that's why we display a warning here.

There are two things that you can do:

Sort your imports to create a consistent order. I must admit that the warning could be improved to point to the locations that need to be changed.

Ignore the warning with stats.warningFilter when the order of these styles doesn't matter. Maybe the eventually add an option to mark order-independent styles directly.

来源

[HuJean]

page引用了多个组件的顺序不一样也会导致样式的引用顺序不一样，这个有没有比较推荐的引用方式呢？

[zjxpcyc]

感觉，这个还是 reopen 吧。我这边也有这个现象。
@Chen-jj 调整引入顺序这个操作确实要求有点骚。需要非常小心才能做到。是不是可以让 TARO 去解决这问题？

[zjxpcyc]

好像Taro2版本没有出现过这个问题

[steveswork]

There is now an NPM package named @webkrafters/ordercss which tackles this issue.

Full disclosure: I initially created it to solve this very problem in one of my apps but decided to expand it and share it with everyone.

If this package helps anyone, please share it with others.

Thanks and good luck!

[flowfire]

在 config/index.js 下添加如下配置

  mini: {
    miniCssExtractPluginOption: {
      ignoreOrder: true,
    },
  },

[AaronConlon]

上面的朋友的配置确实有效，但是不处理好冲突，production模式下没法构建，该不会我这里是特例吧。

[mashirozx]

原因是组件引入顺序不一样
https://www.jianshu.com/p/0597b24b2ef7

[luckymore]

@Developer27149 +1

[rijn]

Resolved after adding rule eslint-plugin-import/order. Make sure internal is after parent,sibling,index

Here's my eslint config

    "import/order": [ "error", {
      "newlines-between": "always",
      groups: ["builtin", "external", "parent", "sibling", "index", "internal", "object", "type"],
      alphabetize: {
        order: 'asc',
        caseInsensitive: true,
      },
    } ],

[JamesMonges]

原因是组件引入顺序不一样 https://www.jianshu.com/p/0597b24b2ef7

太棒了！是这个原因，报错上面页提示了是哪个页面，对比页面，更改组件顺序就好了

[shaohuahuang]

在 config/index.js 下添加如下配置

  mini: {
    miniCssExtractPluginOption: {
      ignoreOrder: true,
    },
  },

这个错误在Taro的场景下会不会造成其他潜在问题？