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声明的默认样式,可以参考这里
如果使用全局引入的方式,这就可以了。
但是,若使用按需引入,就不行了。主要有两个原因
对于第一个问题。我们知道使用按需引入需要添加一个插件即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,相对而言就更友好一些。