scss项目element-ui按需加载且自定义主题

第一步，安装element-ui 

npm i element-ui -S

第二步按需引入安装：

npm install babel-plugin-component -D

更改.babelrc文件
	"plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]

第三步，在main.js中：

import { Button, Select } from 'element-ui';
Vue.use(Button)
Vue.use(Select)

那么如何自定义主题呢

前提，已经在Vue项目中使用了scss,则可以直接创建一个element-variables.scss文件：

$--color-primary: #409EFF;
$--color-success: #03C78C;
$--color-warning: #FFBE2D;
$--color-danger: #FF2660;
$--color-info: #727FC5;
$--color-text-primary: #333333;
$--color-text-regular: #666666;
$--color-text-secondary: #999999;
$--color-text-placeholder: #CCCCCC;
$--font-path:"~element-ui/lib/theme-chalk/fonts";/* 改变 icon 字体路径变量，必需 */
@import" ~element-ui/packages/theme-chalk/src/index";

然后直接在main.js中引入:

注意：index.js和scss样式的前后加载顺序，一定是index.js在scss之前。

import "./element-ui-setting/index.js";
import "./element-ui-setting/element-variables.scss";