Element: [Bug Report] custom theme, CSS repeated multiple times

Created on 2 Jul 2018  ·  58Comments  ·  Source: ElemeFE/element

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样式重复

picture gangyeona
👍22

Most helpful comment

I meet the same problem

picture ashen9 on 2 Jul 2018
👍12

All 58 comments

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

element-bot picture element-bot on 2 Jul 2018

I meet the same problem

ashen9 picture ashen9 on 2 Jul 2018
👍12

@ashen9 请问你解决了吗

gangyeona picture gangyeona on 27 Jul 2018
👍1

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

Edhilion picture Edhilion on 13 Aug 2018
👍1

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

ststaynov picture ststaynov on 13 Aug 2018
👍1

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

gangyeona picture gangyeona on 22 Aug 2018
😕2

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

hanzhangyu picture hanzhangyu on 7 Sep 2018
👍4

Did somebody managed to resolve this? :/

ststaynov picture ststaynov on 24 Sep 2018
👍2

I have the same problem.

driesdesmet picture driesdesmet on 1 Oct 2018
👍3

@ashen9 请问你解决了吗

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

ashen9 picture ashen9 on 8 Oct 2018

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? 👎

7iomka picture 7iomka on 18 Oct 2018

Same problem.

zimuZhao picture zimuZhao on 7 Nov 2018
👍1

same here

truefalse10 picture truefalse10 on 7 Nov 2018
👍1

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

Zver64 picture Zver64 on 14 Nov 2018
👍1

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 picture chenzhq on 28 Dec 2018
👍1

same problem v2.6.1 on nuxt

edum18 picture edum18 on 11 Mar 2019
👍1

repeat

lingsang2 picture lingsang2 on 21 Mar 2019
😕1

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

praveenpuglia picture praveenpuglia on 9 Apr 2019
😕2

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

andrewlamyw picture andrewlamyw on 12 Apr 2019
👍1

the same on 2.8.0

okosowski picture okosowski on 25 Apr 2019
👍3

@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 picture e-cloud on 19 May 2019

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

e-cloud picture e-cloud on 19 May 2019

@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?

edum18 picture edum18 on 19 May 2019
👍2

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

This is not an elegant solution.

chenzhq picture chenzhq on 21 May 2019

Anybody tested on the latest version 2.9.1?

andrewlamyw picture andrewlamyw on 3 Jun 2019

Anybody tested on the latest version 2.9.1?

Yeah, problem is still there...

JBtje picture JBtje on 3 Jun 2019
👍3

same problem here with [email protected]

valterbarros picture valterbarros on 7 Jun 2019
👍1

I have the same problem with [email protected]

KeziahMoselle picture KeziahMoselle on 8 Jun 2019
👍4

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

myy012 picture myy012 on 1 Jul 2019

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') }) }) }

ifreeWorld picture ifreeWorld on 2 Jul 2019 
function replaceSassLoader2Fast(rule) {
    rule.use('sass-loader')
        .loader('fast-sass-loader')
        .options({
            includePaths: [
                path.join(process.cwd(), 'src'),
            ],
        });
}
// chainWebpack
const types = ['vue-modules', 'vue', 'normal-modules', 'normal'];
types.forEach((type) => {
    replaceSassLoader2Fast(config.module.rule('scss').oneOf(type));
});
chenzhq picture chenzhq on 8 Jul 2019
👎1

same problem with sass-loader, webpack4 and [email protected] duplicated over 5 times :(

cain picture cain on 11 Jul 2019
👍5

[email protected] still...

JBtje picture JBtje on 31 Jul 2019

we moved off element-ui because of this issue, hope it gets sorted soon :)

cain picture cain on 1 Aug 2019
👍2

I solved this issue by importing a custom css theme created on https://element.eleme.io/#/en-US/theme
You can configure the same variables as you would do with a custom theme but, in this case, the theme builder creates a .css file for you. Download the custom theme and import it:

import Vue from 'vue';
import Element from 'element-ui';

import PTlang from 'element-ui/lib/locale/lang/pt-br';
import locale from 'element-ui/lib/locale';

// Custom theme you just created  
import '../assets/styles/element-ui-theme/theme/index.css';

locale.use(PTlang);
Vue.use(Element);

Don't forget to add the fonts folder that comes with your downloaded theme.
My element-ui-theme directory:
image

edum18 picture edum18 on 1 Aug 2019
👍4

Hi, @iamkun Could you solve this problem? Many people have met it. Thx.

Dragon-Rider picture Dragon-Rider on 15 Aug 2019
👍2

same problem.
image

jinan5694 picture jinan5694 on 5 Sep 2019
👍8

same here, hope this will get solved real soon.

gcloutier picture gcloutier on 18 Sep 2019
👍6

Same problem, any workaround ?

evenmind picture evenmind on 16 Oct 2019

Same problem, any workaround ?

a workaround was already posted.

edum18 picture edum18 on 17 Oct 2019
👎3

Same issue. I add optimization in dev config to fix it. 

// webpack.dev.js
...
optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true
        }
      }
    }
  }
...
Chersquwn picture Chersquwn on 25 Nov 2019
👍2 👎1

For people having css rules loaded more than twice I know where the problem lies, a bug exists with the sass loader that will bundle the file every time it is imported in another scss file

So if you are importing your theme.scss in other components to use the colors of your theme then you should just import the colors/variables in this file, so split your theme.scss into two files

1 - colors.scss

$--color-primary: #00A09E;
$--color-warning: #EE7219;
$--color-danger: #FE4A49;
$--color-info: #00AEEF;
$--color-success: #D6AE15;
$--color-text-primary: #242B35;
$--color-text-secondary: #D6AE15;

2 - theme.scss

@import "colors";

$--font-path: '~element-ui/lib/theme-chalk/fonts';

// The default generated file is
// @import "~element-ui/packages/theme-chalk/src/index";
// If you want to reduce the size further by getting rid of unused css, 
// copy the content of the previous file and comment the lines of the elements you don't need:
@import "~element-ui/packages/theme-chalk/src/base.scss";
@import "~element-ui/packages/theme-chalk/src/pagination.scss";
@import "~element-ui/packages/theme-chalk/src/dialog.scss";
@import "~element-ui/packages/theme-chalk/src/autocomplete.scss";
@import "~element-ui/packages/theme-chalk/src/dropdown.scss";
@import "~element-ui/packages/theme-chalk/src/dropdown-menu.scss";
@import "~element-ui/packages/theme-chalk/src/dropdown-item.scss";
@import "~element-ui/packages/theme-chalk/src/menu.scss";
@import "~element-ui/packages/theme-chalk/src/submenu.scss";
@import "~element-ui/packages/theme-chalk/src/menu-item.scss";
@import "~element-ui/packages/theme-chalk/src/menu-item-group.scss";
@import "~element-ui/packages/theme-chalk/src/input.scss";
@import "~element-ui/packages/theme-chalk/src/input-number.scss";
@import "~element-ui/packages/theme-chalk/src/radio.scss";
@import "~element-ui/packages/theme-chalk/src/radio-group.scss";
@import "~element-ui/packages/theme-chalk/src/radio-button.scss";
@import "~element-ui/packages/theme-chalk/src/checkbox.scss";
@import "~element-ui/packages/theme-chalk/src/checkbox-button.scss";
@import "~element-ui/packages/theme-chalk/src/checkbox-group.scss";
@import "~element-ui/packages/theme-chalk/src/switch.scss";
@import "~element-ui/packages/theme-chalk/src/select.scss";
@import "~element-ui/packages/theme-chalk/src/button.scss";
@import "~element-ui/packages/theme-chalk/src/button-group.scss";
@import "~element-ui/packages/theme-chalk/src/table.scss";
@import "~element-ui/packages/theme-chalk/src/table-column.scss";
@import "~element-ui/packages/theme-chalk/src/date-picker.scss";
@import "~element-ui/packages/theme-chalk/src/time-select.scss";
@import "~element-ui/packages/theme-chalk/src/time-picker.scss";
@import "~element-ui/packages/theme-chalk/src/popover.scss";
@import "~element-ui/packages/theme-chalk/src/tooltip.scss";
@import "~element-ui/packages/theme-chalk/src/message-box.scss";
@import "~element-ui/packages/theme-chalk/src/breadcrumb.scss";
@import "~element-ui/packages/theme-chalk/src/breadcrumb-item.scss";
@import "~element-ui/packages/theme-chalk/src/form.scss";
@import "~element-ui/packages/theme-chalk/src/form-item.scss";
@import "~element-ui/packages/theme-chalk/src/tabs.scss";
@import "~element-ui/packages/theme-chalk/src/tab-pane.scss";
@import "~element-ui/packages/theme-chalk/src/tag.scss";
@import "~element-ui/packages/theme-chalk/src/tree.scss";
@import "~element-ui/packages/theme-chalk/src/alert.scss";
@import "~element-ui/packages/theme-chalk/src/notification.scss";
@import "~element-ui/packages/theme-chalk/src/slider.scss";
@import "~element-ui/packages/theme-chalk/src/loading.scss";
@import "~element-ui/packages/theme-chalk/src/row.scss";
@import "~element-ui/packages/theme-chalk/src/col.scss";
@import "~element-ui/packages/theme-chalk/src/upload.scss";
@import "~element-ui/packages/theme-chalk/src/progress.scss";
@import "~element-ui/packages/theme-chalk/src/spinner.scss";
@import "~element-ui/packages/theme-chalk/src/message.scss";
@import "~element-ui/packages/theme-chalk/src/badge.scss";
@import "~element-ui/packages/theme-chalk/src/card.scss";
@import "~element-ui/packages/theme-chalk/src/rate.scss";
@import "~element-ui/packages/theme-chalk/src/steps.scss";
@import "~element-ui/packages/theme-chalk/src/step.scss";
@import "~element-ui/packages/theme-chalk/src/carousel.scss";
@import "~element-ui/packages/theme-chalk/src/scrollbar.scss";
@import "~element-ui/packages/theme-chalk/src/carousel-item.scss";
@import "~element-ui/packages/theme-chalk/src/collapse.scss";
@import "~element-ui/packages/theme-chalk/src/collapse-item.scss";
@import "~element-ui/packages/theme-chalk/src/cascader.scss";
@import "~element-ui/packages/theme-chalk/src/color-picker.scss";
@import "~element-ui/packages/theme-chalk/src/transfer.scss";
@import "~element-ui/packages/theme-chalk/src/container.scss";
@import "~element-ui/packages/theme-chalk/src/header.scss";
@import "~element-ui/packages/theme-chalk/src/aside.scss";
@import "~element-ui/packages/theme-chalk/src/main.scss";
@import "~element-ui/packages/theme-chalk/src/footer.scss";
@import "~element-ui/packages/theme-chalk/src/timeline.scss";
@import "~element-ui/packages/theme-chalk/src/timeline-item.scss";
@import "~element-ui/packages/theme-chalk/src/link.scss";
@import "~element-ui/packages/theme-chalk/src/divider.scss";
@import "~element-ui/packages/theme-chalk/src/image.scss";
@import "~element-ui/packages/theme-chalk/src/calendar.scss";
@import "~element-ui/packages/theme-chalk/src/backtop.scss";
@import "~element-ui/packages/theme-chalk/src/infinite-scroll.scss";
@import "~element-ui/packages/theme-chalk/src/page-header.scss";
@import "~element-ui/packages/theme-chalk/src/cascader-panel.scss";
@import "~element-ui/packages/theme-chalk/src/avatar.scss";
@import "~element-ui/packages/theme-chalk/src/drawer.scss";
@import "~element-ui/packages/theme-chalk/src/popconfirm.scss";

And then in your app's scss (not in js) replace your theme imports (eg: @import '{}/element-ui/theme.scss) to color imports (@import '{}/element-ui/colors.scss)

You will also need to get rid of the default element css file (the one without your custom colors)
If you generated your element-ui config with vue-cli (like I did) this is how to do it

Even though you chose to have a custom theme during generation of the config, the plugin still added those lines in babel.config.js (this is a bug that needs to be fixed)

module.exports = {
  'presets': [
    '@vue/cli-plugin-babel/preset'
  ],
  'plugins': [
    [
      'component',
      {
        'libraryName': 'element-ui',
        'styleLibraryName': 'theme-chalk' //THIS
      }
    ]
  ]
}

Change it to

module.exports = {
  'presets': [
    '@vue/cli-plugin-babel/preset'
  ],
  'plugins': [
    [
      'component',
      {
        'libraryName': 'element-ui',
        'style': false
      }
    ]
  ]
}

And the css included will only be your optimized theme's version

Tofandel picture Tofandel on 9 Dec 2019
👎2 😕1 👍1

Same Issue. Version: 2.11.1

.el-input__inner style repeated 18 times.

@Tofandel After trying your solution, repetition reduced to 11, but it still exists.

munjal-vandana picture munjal-vandana on 20 Jan 2020

@Tofandel didn't work for me.

praveenpuglia picture praveenpuglia on 20 Jan 2020

@munjal-vandana did you do both suggestions?

I'm pretty sure you're including your custom theme multiple times

Tofandel picture Tofandel on 20 Jan 2020

@munjal-vandana did you do both suggestions?

I'm pretty sure you're including your custom theme multiple times

Yes! It was due to the Custom theme.

munjal-vandana picture munjal-vandana on 20 Jan 2020

@praveenpuglia You know without giving details, I can't help you.. What did you try? What is not working?

Tofandel picture Tofandel on 20 Jan 2020

I used whatever you suggested above. Still see a lot of duplicates. Specially with input elements.

Change it to

module.exports = {
  'presets': [
    '@vue/cli-plugin-babel/preset'
  ],
  'plugins': [
    [
      'component',
      {
        'libraryName': 'element-ui',
        'style': false
      }
    ]
  ]
}

And the css included will only be your optimized theme's version

praveenpuglia picture praveenpuglia on 21 Jan 2020
👎2

I use Vue CLI, which use PostCSS. Besides @chenzhq solution, here is another fix with postcss-loader:

Edit postcss.config.js to enable cssnano to remove duplicate CSS.

module.exports = {
  plugins: {
    autoprefixer: {},
    cssnano: {}
  },
};

Be aware compile and hot reload will become slower(around 1s on my laptop). Maybe fast-sass-loader is a better option considering efficiency.

P.S. Don't know if element-ui will fix it. Since duplication seems to be intended and is not a real bug. However "import-once" might fix the root casue of this issue once available https://github.com/sass/sass/issues/1094

Pingren picture Pingren on 19 Feb 2020

@Pingren I tried the solution you mentioned but it didn't really work. :(
Will it only remove during build time or during development as well?

praveenpuglia picture praveenpuglia on 21 Feb 2020

@Pingren I tried the solution you mentioned but it didn't really work. :(
Will it only remove during build time or during development as well?

During development as well. Try upgrade your Vue CLI first. According to changelog, it is a new feature introduced in version4.1.0-beta.0 (2019-11-09). Otherwhise you need to enable PostCSS manually.

https://github.com/vuejs/vue-cli/pull/4798

Pingren picture Pingren on 21 Feb 2020

I already have Vue CLI 4.1.2 and I also have the postcss config file.

praveenpuglia picture praveenpuglia on 22 Feb 2020
😕3 👀1

Excuse me, has this problem been solved? I met it too. It makes me feel egg pain...

chencmgithub picture chencmgithub on 11 Apr 2020
👍8 😄1

I've tried all proposed here solutions but nothing works for me. I'm using vue cli and I came up with this solution (it isn't elegant but at least it works):

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.NormalModuleReplacementPlugin(
        /element-ui[\/\\]lib[\/\\]theme-chalk[\/\\](.*)\.css/,
        'node-libs-browser/mock/empty'
      ),
    ],
  }
}

I'm importing my scss with element variables only once in the application entry point.
Hope this will help someone.

andr-canandr picture andr-canandr on 1 May 2020
😕1

@Tofandel 采用你的方案解决了我遇到的问题，感谢！ 关键部分是base.scss文件的的引入

liliangabc picture liliangabc on 5 Aug 2020

@andr-canandr Did you check your babel.config.js file for the following?

module.exports = {
  'presets': [
    '@vue/cli-plugin-babel/preset'
  ],
  'plugins': [
    [
      'component',
      {
        'libraryName': 'element-ui',
       // 'styleLibraryName': 'theme-chalk' //THIS should be 
        'styleLibraryName': "~src/plugins/theme.scss" //Path to your theme file
      }
    ]
  ]
}

I found all the correct info to setup a theme deeply burried in the custom-theme.md

The other documentation is completely incorrect and misleading

Tofandel picture Tofandel on 5 Aug 2020

if you are using theme build tool:

https://github.com/ElementUI/element-theme

you could reference the issue , it solves the problem that removes all the duplicated css classes.

https://github.com/ElementUI/element-theme/issues/66

just add the arguments --minimize in your theme build command

yarn et  --minimize
yozian picture yozian on 9 Oct 2020
👍2

emmm...still exist

xiaoniezi picture xiaoniezi on 27 Oct 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

fscardua picture fscardua  ·  3Comments
yorululu picture yorululu  ·  3Comments
zhguokai picture zhguokai  ·  3Comments
yuchonghua picture yuchonghua  ·  3Comments
akaylh picture akaylh  ·  3Comments