[Bug Report] custom theme, CSS repeated multiple times #11817

gangyeona · 2018-07-02T03:25:04Z

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 · 2018-07-02T03:25:07Z

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 · 2018-07-02T03:55:29Z

I meet the same problem

gangyeona · 2018-07-27T03:41:26Z

@ashen9 请问你解决了吗

Edhilion · 2018-08-13T07:56:30Z

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

ststaynov · 2018-08-13T08:27:19Z

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

gangyeona · 2018-08-22T05:59:35Z

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

hanzhangyu · 2018-09-07T03:30:12Z

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 · 2018-09-24T12:01:30Z

Did somebody managed to resolve this? :/

driesdesmet · 2018-10-01T14:04:41Z

I have the same problem.

ashen9 · 2018-10-08T01:25:23Z

@ashen9 请问你解决了吗

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

7iomka · 2018-10-18T19:03:41Z

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 · 2018-11-07T06:44:20Z

Same problem.

truefalse10 · 2018-11-07T09:20:11Z

same here

Zver64 · 2018-11-14T06:31:23Z

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

chenzhq · 2018-12-28T09:53:28Z

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 · 2019-03-11T17:26:39Z

same problem v2.6.1 on nuxt

lingsang2 · 2019-03-21T02:54:26Z

repeat

praveenpuglia · 2019-04-09T13:16:46Z

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

AndrewLamYW · 2019-04-12T10:48:27Z

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

okosowski · 2019-04-25T09:13:32Z

the same on 2.8.0

e-cloud · 2019-05-19T02:32:05Z

@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 · 2019-05-19T02:36:14Z

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

edum18 · 2019-05-19T19:24:37Z

@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 · 2019-05-21T06:53:09Z

@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 · 2019-06-03T00:20:23Z

Anybody tested on the latest version 2.9.1?

JBtje · 2019-06-03T07:01:21Z

Anybody tested on the latest version 2.9.1?

Yeah, problem is still there...

valterbarros · 2019-06-07T14:04:57Z

same problem here with element-ui@2.5.4

KeziahMoselle · 2019-06-08T10:05:10Z

I have the same problem with element-ui@2.9.1

Tofandel · 2019-12-09T09:36:00Z

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

munjal-vandana · 2020-01-20T12:19:26Z

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.

praveenpuglia · 2020-01-20T12:54:23Z

@Tofandel didn't work for me.

Tofandel · 2020-01-20T13:08:30Z

@munjal-vandana did you do both suggestions?

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

munjal-vandana · 2020-01-20T14:33:46Z

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

Tofandel · 2020-01-20T17:43:11Z

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

praveenpuglia · 2020-01-21T13:41:21Z

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

pingren · 2020-02-19T09:42:17Z

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 sass/sass#1094

praveenpuglia · 2020-02-21T06:42:03Z

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

pingren · 2020-02-21T07:40:15Z

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

vuejs/vue-cli#4798

praveenpuglia · 2020-02-22T08:31:12Z

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

chencmgithub · 2020-04-11T14:30:19Z

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

andr-canandr · 2020-05-01T13:13:57Z

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.

liliangabc · 2020-08-05T02:47:34Z

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

Tofandel · 2020-08-05T11:24:27Z

@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

yozian · 2020-10-09T15:19:25Z

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.

ElementUI/element-theme#66

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

yarn et  --minimize

xiaoniezi · 2020-10-27T08:35:51Z

emmm...still exist

gentlecoder · 2021-02-24T03:58:15Z

any solution?

Tofandel · 2021-02-24T09:58:03Z

@gentlecoder Yes, if you had spent time reading trough the comments. Instead of notifying the 38 participants in this thread.

martinstanojevic · 2021-04-05T11:28:08Z

You can import components without CSS by importing them from the lib folder.

Let's use a Tooltip as an example. You would import the component like so:
import { Tooltip} from "element-ui/lib";

And then you import your SCSS only once:
@import "~element-ui/packages/theme-chalk/src/tooltip";

Hope that helps.

zhuxiwen · 2021-08-25T14:28:40Z

Try this https://github.com/zhuxiwen/elementui-scss-theme-no-repeat

yuniit · 2021-09-06T02:23:04Z

Is there any update on this problem?

kk140906 · 2022-02-16T08:00:09Z

Encounted when use vite, no solution?

choco9527 · 2022-03-31T14:49:20Z

即使官网下载下来的index.css也是一堆重复

yusongh · 2022-09-01T13:27:52Z

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 sass/sass#1094

In the vue-cli 4.x version, your method is invalid. Changing to my method can solve the problem of duplication of development environment styles. But it is not perfect, and it will cause the hot update of the style to fail.

Modify vue.config.js and add the following configuration

const cssnanoOptions = {
  preset: [
    "default",
    {
      mergeLonghand: false,
      cssDeclarationSorter: false
    }
  ]
};

module.exports = {
  css: {
    extract: true
  },
  chainWebpack: config => {
    config.when(process.env.NODE_ENV === "development", config => {
      config
        .plugin("optimize-css")
        .use(require("@intervolga/optimize-cssnano-plugin"), [
          {
            sourceMap: true,
            cssnanoOptions
          }
        ]);
    });
  }
}

cocoasui · 2023-10-26T11:04:14Z

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 sass/sass#1094

thx! this works for me.
vue-cli@4.5.19
element-ui@2.15.14
import element-variables.scss globally.

wangyang0210 · 2024-05-10T06:39:59Z

最近也遇到这样的问题，尝试了上面的解决方法并没有解决问题，最后直接使用工具生成css，再进行引入解决了，不过我的需求，只是简单的修改主题配色；

工具：https://elementui.github.io/theme-chalk-preview/#/zh-CN

更改主题色为自己需要的色彩
下载后放入项目正常引入

element-bot changed the title ~~[Bug Report] 自定义主题,css多次重复~~ [Bug Report] custom theme, CSS repeated multiple times Jul 2, 2018

JBtje mentioned this issue Apr 25, 2019

[Bug Report] multiple loading of the same styles using custom theme #15266

Closed

pingren mentioned this issue Feb 19, 2020

页面重复引入css样式有什么好的解决方法吗？ hzsrc/vue-element-ui-scaffold-webpack4#7

Closed

anncwb mentioned this issue Aug 1, 2021

build后 element-plus 样式重复加载 vbenjs/vite-plugin-style-import#17

Closed

songhn233 mentioned this issue Mar 11, 2022

🐛 [Bug]: vite less loader 3lang3/react-vant#330

Closed

3 tasks

[Bug Report] custom theme, CSS repeated multiple times #11817

[Bug Report] custom theme, CSS repeated multiple times #11817

Comments

gangyeona commented Jul 2, 2018

Element UI version

OS/Browsers version

Vue version

Reproduction Link

Steps to reproduce

What is Expected?

What is actually happening?

element-bot commented Jul 2, 2018

ashen9 commented Jul 2, 2018

gangyeona commented Jul 27, 2018

Edhilion commented Aug 13, 2018 • edited

ststaynov commented Aug 13, 2018

gangyeona commented Aug 22, 2018

hanzhangyu commented Sep 7, 2018

ststaynov commented Sep 24, 2018

driesdesmet commented Oct 1, 2018

ashen9 commented Oct 8, 2018

7iomka commented Oct 18, 2018

zimuZhao commented Nov 7, 2018

truefalse10 commented Nov 7, 2018

Zver64 commented Nov 14, 2018

chenzhq commented Dec 28, 2018 • edited

edum18 commented Mar 11, 2019 • edited

lingsang2 commented Mar 21, 2019

praveenpuglia commented Apr 9, 2019 • edited

AndrewLamYW commented Apr 12, 2019

okosowski commented Apr 25, 2019

e-cloud commented May 19, 2019

e-cloud commented May 19, 2019

edum18 commented May 19, 2019 • edited

chenzhq commented May 21, 2019 • edited

AndrewLamYW commented Jun 3, 2019

JBtje commented Jun 3, 2019

valterbarros commented Jun 7, 2019

KeziahMoselle commented Jun 8, 2019

Tofandel commented Dec 9, 2019 • edited

munjal-vandana commented Jan 20, 2020

praveenpuglia commented Jan 20, 2020

Tofandel commented Jan 20, 2020

munjal-vandana commented Jan 20, 2020

Tofandel commented Jan 20, 2020

praveenpuglia commented Jan 21, 2020

pingren commented Feb 19, 2020 • edited

praveenpuglia commented Feb 21, 2020

pingren commented Feb 21, 2020 • edited

praveenpuglia commented Feb 22, 2020

chencmgithub commented Apr 11, 2020

andr-canandr commented May 1, 2020

liliangabc commented Aug 5, 2020

Tofandel commented Aug 5, 2020 • edited

yozian commented Oct 9, 2020

xiaoniezi commented Oct 27, 2020

gentlecoder commented Feb 24, 2021

Tofandel commented Feb 24, 2021

martinstanojevic commented Apr 5, 2021

zhuxiwen commented Aug 25, 2021

yuniit commented Sep 6, 2021

kk140906 commented Feb 16, 2022

choco9527 commented Mar 31, 2022

yusongh commented Sep 1, 2022

cocoasui commented Oct 26, 2023

wangyang0210 commented May 10, 2024

Edhilion commented Aug 13, 2018 •

edited

chenzhq commented Dec 28, 2018 •

edited

edum18 commented Mar 11, 2019 •

edited

praveenpuglia commented Apr 9, 2019 •

edited

edum18 commented May 19, 2019 •

edited

chenzhq commented May 21, 2019 •

edited

Tofandel commented Dec 9, 2019 •

edited

pingren commented Feb 19, 2020 •

edited

pingren commented Feb 21, 2020 •

edited

Tofandel commented Aug 5, 2020 •

edited