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

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声明的默认样式，可以参考这里

如果使用全局引入的方式，这就可以了。

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

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

对于第一个问题。我们知道使用按需引入需要添加一个插件即babel-plugin-component，至于使用方式我这里不做赘述，可以参考官网。但通过查阅官网发现这个插件并不能引入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，相对而言就更友好一些。