element-ui 按需加载情况下覆盖预置scss变量

痛定思痛。 2022-11-12 15:57 151阅读 0赞

element-ui的默认主题`theme-chalk`是通过scss预编译的，可以通过修改scss变量达到修改主题的目的。

> 在项目中改变 SCSS 变量  
> Element 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element 的样式变量。新建一个样式文件，例如 element-variables.scss，写入以下内容：

> /\* 改变主题色变量 */  
> $–color-primary: teal;  
> /* 改变 icon 字体路径变量，必需 \*/  
> $–font-path: ‘~element-ui/lib/theme-chalk/fonts’;

> @import “~element-ui/packages/theme-chalk/src/index”;  
> 之后，在项目的入口文件中，直接引入以上样式文件即可（无需引入 Element 编译好的 CSS 文件）：

> import Vue from ‘vue’  
> import Element from ‘element-ui’  
> import ‘./element-variables.scss’  
> Vue.use(Element)

`$–color-primary` 即element-ui的primary颜色变量，通过修改这个变量从而实现自定义主题颜色。当然还有很多其他的变量，如下图：

究其内部原理，因为element scss 的变量声明均加入了`!default`后缀，固无论你是否在element scss样式引入前还是引入后，均会覆盖掉element声明的默认样式，可以[参考这里][Link 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]  
如果使用全局引入的方式，这就可以了。

但是，若使用按需引入，就不行了。主要有两个原因

*  按需引入的情况下如何引入scss文件而不是css文件
 *  如何将定义好的变量加入到每个引入的scss之中

对于第一个问题。我们知道使用按需引入需要添加一个插件即`babel-plugin-component`，至于使用方式我这里不做赘述，可以参考[官网][Link 2]。但通过查阅官网发现这个插件并不能引入scss文件，通过查看源码发现其存在一个未写在文档上的api可以实现。

[
          "component",
          { 
          // 这个配置文档并没有，但源码中是有做判断的。默认为css，如果配置了这个字段则为scss.
            "ext": ".scss",
            "libraryName": "element-ui",
            "styleLibrary": { 
              "name": "~node_modules/element-ui/packages/theme-chalk/src",
              "base": true,
              "path": "[module].scss",
              "mixin": false
            }
          }
        ],

对于第二个问题，需要使用webpack的配置去实现，如下：

{ 
        loader: 'sass-loader',
        options: { 
          additionalData: `@import "@/assets/theme/vars.scss";`
        }
      }

简单来说就是通过给各个scss文件头部添加一条导包语句，进而实现将预置好的scss变量引入到每个scss文件的目的。如果你使用vue-cli，请自行查阅vue-cli的文档。大概是这样的：

css: { 
        loaderOptions: { 
          sass: { 
            prependData: ` @import "@/assets/theme/vars.scss; `,
          },
        },
      },

最后再次尝试打包即可。另外说一句，antd的插件就可以直接引入scss，相对而言就更友好一些。

[Link 1]: https://sass-lang.com/documentation/variables#default-values
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzQ1OTg2Ng_size_16_color_FFFFFF_t_70]: /images/20221022/5d1b13bfb8214b17be634567cdce3cff.png
[Link 2]: https://github.com/ElementUI/babel-plugin-component