Element: [Bug Report] 自定义主题，CSS 重复多次

本期翻译：

元素界面版本
2.4.2

操作系统/浏览器版本
Ubuntu16.4

Vue版本
2.5.17-beta.0

转载链接
https://jsfiddle.net/mmx38qxw/localproject

重现步骤
按照官网2自定义主题步骤的操作，设置新主题后，打开项目页面，从控制台可以看到按钮、输入等空间的样式可以重复多次，4次、7次甚至更多次。

使用webpack CSS去除插件无效
什么是预期？

CSS 样式不重复
实际发生了什么？

CSS 样式重复

我遇到了同样的问题

@ashen9 请问你解决了吗

2.4.6 上的同样问题，让我的自定义模板被默认模板覆盖。

在我的项目中，相同的样式被重复 > 10 次。 我相信这可能与 webpack 设置有关？

@ststaynov我曾尝试添加一些插件来处理 webpackconfigs 中的 css，但什么也没发生

和我一样（我有7次），我是这样用的http://element-cn.eleme.io/#/zh -CN/component/custom-theme#zai-xiang-mu-zhong-gai-bian -scss-变亮

有人设法解决了这个问题吗？ ：/

我也有同样的问题。

@ashen9 请问你解决了吗

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

同样的问题；
如果想使用 input 和 input-number，并根据需要导入样式和组件，我将样式包含两次，因为在我的示例中，在文件：input-number.scss 中我有：
<strong i="7">@import</strong> "input";
为什么它在所有组件中都被导入？ 没有足够的 mixin 和 vars？ 👎

同样的问题。

同样在这里

"element-ui": "^2.4.5" 同样的问题

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

<strong i="8">@import</strong> "mixins/mixins";
<strong i="9">@import</strong> "common/var";
<strong i="10">@import</strong> "button";
<strong i="11">@import</strong> "./popper";

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

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

nuxt 上同样的问题 v2.6.1

重复

相同的！ 它杀死了我。
我怀疑这是否是因为 element 没有使用 sass 部分。

2.7版本问题依然存在，如何解决？

2.8.0 相同

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

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

<strong i="11">@import</strong> "mixins/mixins";
<strong i="12">@import</strong> "common/var";
<strong i="13">@import</strong> "button";
<strong i="14">@import</strong> "./popper";

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

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

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

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

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

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

<strong i="12">@import</strong> "mixins/mixins";
<strong i="13">@import</strong> "common/var";
<strong i="14">@import</strong> "button";
<strong i="15">@import</strong> "./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两者。 取决于您的webpack或vue.config.js 。
你可以用它来代替 sass-loader。

这不是一个优雅的解决方案。

有人在最新版本 2.9.1 上测试过吗？

有人在最新版本 2.9.1 上测试过吗？

是的，问题仍然存在......

[email protected] 也有同样的问题

我对[email protected]也有同样的问题

我尝试这样做，但没有奏效。配置错误在哪里？CSS重复了2次

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]正常，现在是[email protected]
vue-cli 是 3.0.0-rc.11

我尝试这样做，但没有成功。我的 CSS 重复了 7 次， [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') }) }) }

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

与 sass-loader、webpack4 和[email protected]重复 5 次以上的相同问题:(

[email protected]仍然...

由于这个问题，我们移除了 element-ui，希望它很快得到解决:)

我通过导入在https://element.eleme.io/#/en -US/theme 上创建的自定义 css 主题解决了这个问题
您可以配置与自定义主题相同的变量，但在这种情况下，主题构建器会为您创建一个 .css 文件。 下载自定义主题并导入：

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);

不要忘记添加下载主题附带的字体文件夹。
我的 element-ui-theme 目录：

嗨， @iamkun你能解决这个问题吗？ 很多人都遇到过。 谢谢。

同样的问题。

同样在这里，希望这将很快得到解决。

同样的问题，有什么解决办法吗？

同样的问题，有什么解决办法吗？

已经发布了解决方法。

同样的问题。 我在开发配置中添加optimization来修复它。

// webpack.dev.js
...
optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'all',
          enforce: true
        }
      }
    }
  }
...

对于 css 规则加载两次以上的人，我知道问题出在哪里，sass 加载器存在一个错误，每次将文件导入另一个 scss 文件时都会将其捆绑

因此，如果您在其他组件中导入theme.scss以使用主题的颜色，那么您应该只导入此文件中的颜色/变量，因此将您的theme.scss拆分为两个文件

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

<strong i="16">@import</strong> "colors";

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

// The default generated file is
// <strong i="17">@import</strong> "~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:
<strong i="18">@import</strong> "~element-ui/packages/theme-chalk/src/base.scss";
<strong i="19">@import</strong> "~element-ui/packages/theme-chalk/src/pagination.scss";
<strong i="20">@import</strong> "~element-ui/packages/theme-chalk/src/dialog.scss";
<strong i="21">@import</strong> "~element-ui/packages/theme-chalk/src/autocomplete.scss";
<strong i="22">@import</strong> "~element-ui/packages/theme-chalk/src/dropdown.scss";
<strong i="23">@import</strong> "~element-ui/packages/theme-chalk/src/dropdown-menu.scss";
<strong i="24">@import</strong> "~element-ui/packages/theme-chalk/src/dropdown-item.scss";
<strong i="25">@import</strong> "~element-ui/packages/theme-chalk/src/menu.scss";
<strong i="26">@import</strong> "~element-ui/packages/theme-chalk/src/submenu.scss";
<strong i="27">@import</strong> "~element-ui/packages/theme-chalk/src/menu-item.scss";
<strong i="28">@import</strong> "~element-ui/packages/theme-chalk/src/menu-item-group.scss";
<strong i="29">@import</strong> "~element-ui/packages/theme-chalk/src/input.scss";
<strong i="30">@import</strong> "~element-ui/packages/theme-chalk/src/input-number.scss";
<strong i="31">@import</strong> "~element-ui/packages/theme-chalk/src/radio.scss";
<strong i="32">@import</strong> "~element-ui/packages/theme-chalk/src/radio-group.scss";
<strong i="33">@import</strong> "~element-ui/packages/theme-chalk/src/radio-button.scss";
<strong i="34">@import</strong> "~element-ui/packages/theme-chalk/src/checkbox.scss";
<strong i="35">@import</strong> "~element-ui/packages/theme-chalk/src/checkbox-button.scss";
<strong i="36">@import</strong> "~element-ui/packages/theme-chalk/src/checkbox-group.scss";
<strong i="37">@import</strong> "~element-ui/packages/theme-chalk/src/switch.scss";
<strong i="38">@import</strong> "~element-ui/packages/theme-chalk/src/select.scss";
<strong i="39">@import</strong> "~element-ui/packages/theme-chalk/src/button.scss";
<strong i="40">@import</strong> "~element-ui/packages/theme-chalk/src/button-group.scss";
<strong i="41">@import</strong> "~element-ui/packages/theme-chalk/src/table.scss";
<strong i="42">@import</strong> "~element-ui/packages/theme-chalk/src/table-column.scss";
<strong i="43">@import</strong> "~element-ui/packages/theme-chalk/src/date-picker.scss";
<strong i="44">@import</strong> "~element-ui/packages/theme-chalk/src/time-select.scss";
<strong i="45">@import</strong> "~element-ui/packages/theme-chalk/src/time-picker.scss";
<strong i="46">@import</strong> "~element-ui/packages/theme-chalk/src/popover.scss";
<strong i="47">@import</strong> "~element-ui/packages/theme-chalk/src/tooltip.scss";
<strong i="48">@import</strong> "~element-ui/packages/theme-chalk/src/message-box.scss";
<strong i="49">@import</strong> "~element-ui/packages/theme-chalk/src/breadcrumb.scss";
<strong i="50">@import</strong> "~element-ui/packages/theme-chalk/src/breadcrumb-item.scss";
<strong i="51">@import</strong> "~element-ui/packages/theme-chalk/src/form.scss";
<strong i="52">@import</strong> "~element-ui/packages/theme-chalk/src/form-item.scss";
<strong i="53">@import</strong> "~element-ui/packages/theme-chalk/src/tabs.scss";
<strong i="54">@import</strong> "~element-ui/packages/theme-chalk/src/tab-pane.scss";
<strong i="55">@import</strong> "~element-ui/packages/theme-chalk/src/tag.scss";
<strong i="56">@import</strong> "~element-ui/packages/theme-chalk/src/tree.scss";
<strong i="57">@import</strong> "~element-ui/packages/theme-chalk/src/alert.scss";
<strong i="58">@import</strong> "~element-ui/packages/theme-chalk/src/notification.scss";
<strong i="59">@import</strong> "~element-ui/packages/theme-chalk/src/slider.scss";
<strong i="60">@import</strong> "~element-ui/packages/theme-chalk/src/loading.scss";
<strong i="61">@import</strong> "~element-ui/packages/theme-chalk/src/row.scss";
<strong i="62">@import</strong> "~element-ui/packages/theme-chalk/src/col.scss";
<strong i="63">@import</strong> "~element-ui/packages/theme-chalk/src/upload.scss";
<strong i="64">@import</strong> "~element-ui/packages/theme-chalk/src/progress.scss";
<strong i="65">@import</strong> "~element-ui/packages/theme-chalk/src/spinner.scss";
<strong i="66">@import</strong> "~element-ui/packages/theme-chalk/src/message.scss";
<strong i="67">@import</strong> "~element-ui/packages/theme-chalk/src/badge.scss";
<strong i="68">@import</strong> "~element-ui/packages/theme-chalk/src/card.scss";
<strong i="69">@import</strong> "~element-ui/packages/theme-chalk/src/rate.scss";
<strong i="70">@import</strong> "~element-ui/packages/theme-chalk/src/steps.scss";
<strong i="71">@import</strong> "~element-ui/packages/theme-chalk/src/step.scss";
<strong i="72">@import</strong> "~element-ui/packages/theme-chalk/src/carousel.scss";
<strong i="73">@import</strong> "~element-ui/packages/theme-chalk/src/scrollbar.scss";
<strong i="74">@import</strong> "~element-ui/packages/theme-chalk/src/carousel-item.scss";
<strong i="75">@import</strong> "~element-ui/packages/theme-chalk/src/collapse.scss";
<strong i="76">@import</strong> "~element-ui/packages/theme-chalk/src/collapse-item.scss";
<strong i="77">@import</strong> "~element-ui/packages/theme-chalk/src/cascader.scss";
<strong i="78">@import</strong> "~element-ui/packages/theme-chalk/src/color-picker.scss";
<strong i="79">@import</strong> "~element-ui/packages/theme-chalk/src/transfer.scss";
<strong i="80">@import</strong> "~element-ui/packages/theme-chalk/src/container.scss";
<strong i="81">@import</strong> "~element-ui/packages/theme-chalk/src/header.scss";
<strong i="82">@import</strong> "~element-ui/packages/theme-chalk/src/aside.scss";
<strong i="83">@import</strong> "~element-ui/packages/theme-chalk/src/main.scss";
<strong i="84">@import</strong> "~element-ui/packages/theme-chalk/src/footer.scss";
<strong i="85">@import</strong> "~element-ui/packages/theme-chalk/src/timeline.scss";
<strong i="86">@import</strong> "~element-ui/packages/theme-chalk/src/timeline-item.scss";
<strong i="87">@import</strong> "~element-ui/packages/theme-chalk/src/link.scss";
<strong i="88">@import</strong> "~element-ui/packages/theme-chalk/src/divider.scss";
<strong i="89">@import</strong> "~element-ui/packages/theme-chalk/src/image.scss";
<strong i="90">@import</strong> "~element-ui/packages/theme-chalk/src/calendar.scss";
<strong i="91">@import</strong> "~element-ui/packages/theme-chalk/src/backtop.scss";
<strong i="92">@import</strong> "~element-ui/packages/theme-chalk/src/infinite-scroll.scss";
<strong i="93">@import</strong> "~element-ui/packages/theme-chalk/src/page-header.scss";
<strong i="94">@import</strong> "~element-ui/packages/theme-chalk/src/cascader-panel.scss";
<strong i="95">@import</strong> "~element-ui/packages/theme-chalk/src/avatar.scss";
<strong i="96">@import</strong> "~element-ui/packages/theme-chalk/src/drawer.scss";
<strong i="97">@import</strong> "~element-ui/packages/theme-chalk/src/popconfirm.scss";

然后在您的应用程序的 scss（不是在 js 中）将您的主题导入（例如： <strong i="5">@import</strong> '{}/element-ui/theme.scss ）替换为颜色导入（ <strong i="7">@import</strong> '{}/element-ui/colors.scss ）

您还需要删除默认元素 css 文件（没有自定义颜色的文件）
如果您使用 vue-cli 生成了您的 element-ui 配置（就像我所做的那样），这是如何做到的

即使您在生成配置时选择了自定义主题，插件仍然在babel.config.js添加了这些行（这是一个需要修复的错误）

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

将其更改为

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

并且包含的​​ css 只会是您优化主题的版本

同样的问题。 版本：2.11.1

.el-input__inner 样式重复 18 次。

@Tofandel尝试您的解决方案后，重复次数减少到 11，但它仍然存在。

@Tofandel对我不起作用。

@munjal-vandana 你做了这两个建议吗？

我很确定您多次包含自定义主题

@munjal-vandana 你做了这两个建议吗？

我很确定您多次包含自定义主题

是的！ 这是由于自定义主题。

@praveenpuglia你知道不提供细节，我无法帮助你..你尝试了什么？ 什么不工作？

我使用了你上面建议的任何东西。 仍然看到很多重复。 特别是输入元素。

将其更改为

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

并且包含的​​ css 只会是您优化主题的版本

我使用 Vue CLI，它使用 PostCSS。 除了@chenzhq解决方案，这里是 postcss-loader 的另一个修复：

编辑 postcss.config.js 以启用 cssnano 删除重复的 CSS。

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

请注意编译和热重载会变慢（在我的笔记本电脑上大约 1 秒）。 考虑到效率，也许 fast-sass-loader 是更好的选择。

PS 不知道 element-ui 是否会修复它。 由于重复似乎是有意的，并不是真正的错误。 但是，一旦可用，“导入一次”可能会解决此问题的根本原因https://github.com/sass/sass/issues/1094

@Pingren我试过你提到的解决方案，但它并没有真正奏效。 :(
它只会在构建期间或开发期间删除吗？

@Pingren我试过你提到的解决方案，但它并没有真正奏效。 :(
它只会在构建期间或开发期间删除吗？

在开发过程中也是如此。 首先尝试升级您的 Vue CLI。 根据更新日志，这是在4.1.0-beta.0 (2019-11-09)版本中引入的新功能。 否则你需要手动启用 PostCSS。

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

我已经有了 Vue CLI 4.1.2 并且我还有 postcss 配置文件。

请问，这个问题解决了吗？ 我也遇到了。 这让我感到蛋疼...

我已经尝试了这里提出的所有解决方案，但对我来说没有任何效果。 我正在使用 vue cli，我想出了这个解决方案（它并不优雅，但至少它有效）：

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

我在应用程序入口点中只导入了一次带有元素变量的 scss。
希望这会帮助某人。

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

@andr-canandr 您是否检查了 babel.config.js 文件中的以下内容？

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
      }
    ]
  ]
}

我在custom-theme.md 中找到了设置主题的所有正确信息

其他文档完全不正确且具有误导性

如果您使用的是主题构建工具：

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

您可以参考该问题，它解决了删除所有重复 css 类的问题。

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

只需在主题构建命令中添加参数--minimize

yarn et  --minimize 

emmm……还存在