[Bug Report] custom theme, CSS repeated multiple times

[gangyeona]

trafficstars

Element UI version

2.4.2

OS/Browsers version

ubuntu16.4

Vue version

2.5.17-beta.0

Reproduction Link

https://jsfiddle.net/mmx38qxw/localproject

Steps to reproduce

按照官网2种自定义主题步骤操作,设置好新的主题后,打开项目页面,从控制台可以看到button,input等空间的样式重复多次,有4次,7次甚至更多次. 使用webpack css去重插件也不生效

What is Expected?

css样式不重复

What is actually happening?

css样式重复

[element-bot]

Translation of this issue:

Element UI version 2.4.2

OS/Browsers version Ubuntu16.4

Vue version 2.5.17-beta.0

Reproduction Link https://jsfiddle.net/mmx38qxw/localproject

Steps to reproduce According to the operation of 2 custom theme steps of the official network, after setting up a new theme, opening the project page, from the console, you can see that the style of button, input and other spaces can be repeated many times, 4 times, 7 times or even more times.

The use of webpack CSS to remove the plug-in is not effective What is Expected?

CSS style does not repeat What is actually happening?

CSS style duplication

[ashen9]

I meet the same problem

[gangyeona]

@ashen9 请问你解决了吗

[Edhilion]

Same problem on 2.4.6, make my custom template overridden by the default one.

[ststaynov]

In my project same styling gets repeated > 10 times. I believe it might have something to do with the webpack setup?

[gangyeona]

@ststaynov i had tried to add some plugins to deal css in webpackconfigs,but nothing happend

[hanzhangyu]

Same to me ( I got 7 times), and I used this way http://element-cn.eleme.io/#/zh-CN/component/custom-theme#zai-xiang-mu-zhong-gai-bian-scss-bian-liang

[ststaynov]

Did somebody managed to resolve this? :/

[driesdesmet]

I have the same problem.

[ashen9]

@ashen9 请问你解决了吗

没有，应该是按需加载时各个组件有重复定义的class，改成全量加载后，element打包去重了

[7iomka]

Same issue; If want to use input & input-number, and import styles and components on demand, I have styles included twice, because, for my example, in file: input-number.scss i have: @import "input"; Why was it imported in all components? Not enough mixins & vars? 👎

[zimuZhao]

Same problem.

[truefalse10]

same here

[Zver64]

"element-ui": "^2.4.5" same problem

[chenzhq]

same problem 怀疑是否现部分scss文件的引用有问题 以下是dropdown.scss的头部

@import "mixins/mixins";
@import "common/var";
@import "button";
@import "./popper";

是不是这里@import了button导致button样式重复编译

---

fast-sass-loader can fix this bug. It can remove the duplication code.

[edum18]

same problem v2.6.1 on nuxt

[lingsang2]

repeat

[praveenpuglia]

same! and its killing me. I doubt whether this is because element does not make use of sass partials.

[AndrewLamYW]

The problem still exist in version 2.7, how to fix this?

[okosowski]

the same on 2.8.0

[e-cloud]

@Leopoldthecoder @QingWei-Li are you aware of this?

same problem 怀疑是否现部分scss文件的引用有问题 以下是dropdown.scss的头部

@import "mixins/mixins";
@import "common/var";
@import "button";
@import "./popper";

是不是这里@import了button导致button样式重复编译

fast-sass-loader can fix this bug. It can remove the duplication code.

@chenzhq 指出了问题的根源。多处scss 组件模块重复引用了其他模块，导致本地开发会看到多份重复样式，只是因为 production build 的时候被自动dedup了

[e-cloud]

@Leopoldthecoder @QingWei-Li 移除组件内部的重复引用是否可行？还是说因为要兼顾按需引用的特性才搞成这样？

[edum18]

@Leopoldthecoder @QingWei-Li are you aware of this?

same problem 怀疑是否现部分scss文件的引用有问题 以下是dropdown.scss的头部

@import "mixins/mixins";
@import "common/var";
@import "button";
@import "./popper";

是不是这里@import了button导致button样式重复编译 fast-sass-loader can fix this bug. It can remove the duplication code.

@chenzhq 指出了问题的根源。多处scss 组件模块重复引用了其他模块，导致本地开发会看到多份重复样式，只是因为 production build 的时候被自动dedup了

using fast-sass-loader only fixes it on production? or also on dev?

[chenzhq]

@edum18 both. Depend on your webpack or vue.config.js. you can use it to replace the sass-loader.

This is not an elegant solution.

[AndrewLamYW]

Anybody tested on the latest version 2.9.1?

[JBtje]

Anybody tested on the latest version 2.9.1?

Yeah, problem is still there...

[valterbarros]

same problem here with [email protected]

[KeziahMoselle]

I have the same problem with [email protected]

[myy012]

I tried to do that but it didn't work。Where is the configuration error？CSS repeated 2 times

chainWebpack: config => {
    const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];

    const addFastSassLoader = rule => {
        rule
            .use('sass-loader')
            .set('loader', 'fast-sass-loader');
    };
    const scssRule = config.module.rule('scss');
    const sassRule = config.module.rule('sass');
    types.forEach(type => addFastSassLoader(scssRule.oneOf(type)));
    types.forEach(type => addFastSassLoader(sassRule.oneOf(type)));
},

[email protected] is normal，now is [email protected] vue-cli is 3.0.0-rc.11

[ifreeWorld]

I tried to do that but it didn't work。my CSS repeated 7 times，[email protected]

chainWebpack: config => { ['scss', 'sass'].forEach(style => { ['vue', 'vue-modules', 'normal-modules', 'normal'].forEach(one => { config.module .rule(style) .oneOf(one) .use('sass-loader') .loader('fast-sass-loader') }) }) }