Umi: less代码打包后混淆，产生重复代码

[youxfans]

What happens?

less代码打包后混淆，产生重复代码

最小可复现仓库

// common.less
body {border: 10px}

//a.less
@import ''common.less'
//b.less
@import ''common.less'
//c.less
@import ''common.less'

打包过后

style.css
body {border: 10px}
body {border: 10px}
body {border: 10px}

请使用 yarn create @umijs/umi-app 创建，并上传到你的 GitHub 仓库

复现步骤，错误日志以及相关配置

相关环境信息

• Umi 版本：
• Node 版本：
• 操作系统：

[youxfans]

如果我的common.less有1000行
我有100个页面@import common.less
我代码就多了10万行 本来只要1000行就够了的
能不能配置什么在混淆的时候去重

[Agagy]

附议，+1，确实是这样，期待解决ing

[drafish]

我这边也复现了这个bug，而且还发现了别的问题。

比如有A、B两个页面，都引用了组件C，A、B都写了自己的样式去覆盖C组件中的样式，最终打包出来的结果是A.css、B.css中都有C组件的样式。因为C组件的样式定义在最前面，可以被A、B组件的样式正确覆盖，所以单独加载A、B页面都没问题。但是从A切到B，再切回A，就会发现A的样式被B中的C组件样式覆盖了。因为从A切到B的时候，B.css会加到标签中，因为B.css在A.css后面，所以B.css中的C组件样式优先级高于A.css中的样式，这样就产生了错误覆盖。

我写了个最小化复现的demo：https://github.com/drafish/umi-demo

[Rhuaer]

我这边也复现了这个bug，而且还发现了别的问题。

比如有A、B两个页面，都引用了组件C，A、B都写了自己的样式去覆盖C组件中的样式，最终打包出来的结果是A.css、B.css中都有C组件的样式。因为C组件的样式定义在最前面，可以被A、B组件的样式正确覆盖，所以单独加载A、B页面都没问题。但是从A切到B，再切回A，就会发现A的样式被B中的C组件样式覆盖了。因为从A切到B的时候，B.css会加到标签中，因为B.css在A.css后面，所以B.css中的C组件样式优先级高于A.css中的样式，这样就产生了错误覆盖。

我写了个最小化复现的demo：https://github.com/drafish/umi-demo

我也有你说的这个问题，后加载的模块会覆盖前面已加载组件的样式

我觉得你这个问题最好是另起一个issue呢

[drafish]

我这边也复现了这个bug，而且还发现了别的问题。
比如有A、B两个页面，都引用了组件C，A、B都写了自己的样式去覆盖C组件中的样式，最终打包出来的结果是A.css、B.css中都有C组件的样式。因为C组件的样式定义在最前面，可以被A、B组件的样式正确覆盖，所以单独加载A、B页面都没问题。但是从A切到B，再切回A，就会发现A的样式被B中的C组件样式覆盖了。因为从A切到B的时候，B.css会加到标签中，因为B.css在A.css后面，所以B.css中的C组件样式优先级高于A.css中的样式，这样就产生了错误覆盖。
我写了个最小化复现的demo：https://github.com/drafish/umi-demo

我也有你说的这个问题，后加载的模块会覆盖前面已加载组件的样式

我觉得你这个问题最好是另起一个issue呢

已经提了，希望能尽快修复吧

[Rhuaer]

我这边也复现了这个bug，而且还发现了别的问题。
比如有A、B两个页面，都引用了组件C，A、B都写了自己的样式去覆盖C组件中的样式，最终打包出来的结果是A.css、B.css中都有C组件的样式。因为C组件的样式定义在最前面，可以被A、B组件的样式正确覆盖，所以单独加载A、B页面都没问题。但是从A切到B，再切回A，就会发现A的样式被B中的C组件样式覆盖了。因为从A切到B的时候，B.css会加到标签中，因为B.css在A.css后面，所以B.css中的C组件样式优先级高于A.css中的样式，这样就产生了错误覆盖。
我写了个最小化复现的demo：drafish/umi-demo

我也有你说的这个问题，后加载的模块会覆盖前面已加载组件的样式
我觉得你这个问题最好是另起一个issue呢

已经提了，希望能尽快修复吧

或者考虑把重复的样式抽取出来，独立成为一个chunk，以下仅供参考

        splitChunks: {
          cacheGroups: {
            styles: {
              name: 'styles',
              chunks: 'all',
              test: /(\.less|\.css)$/,
              priority: 10,
              minChunks: 2,
              enforce: true,
            },
          },
        },

[itellyou-com]

我这边也复现了这个bug，而且还发现了别的问题。
比如有A、B两个页面，都引用了组件C，A、B都写了自己的样式去覆盖C组件中的样式，最终打包出来的结果是A.css、B.css中都有C组件的样式。因为C组件的样式定义在最前面，可以被A、B组件的样式正确覆盖，所以单独加载A、B页面都没问题。但是从A切到B，再切回A，就会发现A的样式被B中的C组件样式覆盖了。因为从A切到B的时候，B.css会加到标签中，因为B.css在A.css后面，所以B.css中的C组件样式优先级高于A.css中的样式，这样就产生了错误覆盖。
我写了个最小化复现的demo：drafish/umi-demo

我也有你说的这个问题，后加载的模块会覆盖前面已加载组件的样式
我觉得你这个问题最好是另起一个issue呢

已经提了，希望能尽快修复吧

或者考虑把重复的样式抽取出来，独立成为一个chunk，以下仅供参考

        splitChunks: {
          cacheGroups: {
            styles: {
              name: 'styles',
              chunks: 'all',
              test: /(\.less|\.css)$/,
              priority: 10,
              minChunks: 2,
              enforce: true,
            },
          },
        },

为啥我这样写了，会出来 styles.js 都没有.css文件

[sorrycc]

Duplicated, 在 https://github.com/umijs/umi/issues/4978 跟进。