本文详细介绍如何使用Element UI的命令行工具生成自定义主题。通过修改SCSS变量文件并重新编译，实现主题颜色等样式定制，适用于前端项目个性化需求。
前言：element采用的是scss预编译语言，这里生成主题的方法是官方提供的命令行工具，通过修改scss文件的变量文件，然后重新编译成css样式文件，项目引入我们编译过的样式文件，因为比较简单，下面直接开始步骤：
1、下载命令行工具（最好最为项目依赖）
npm i element-theme -D
2、下载样式模板
npm i element-theme-chalk -D
//或者
npm i https://github.com/ElementUI/theme-chalk -D
3、生成变量文件
et -i
执行上面的命令会在项目根目录生成element-variables.scss文件
可以手动指定文件名和位置
et -i src/styles/vars.scss
4、根据实际需要，修改变量文件里的变量来改变主题
//例如修改主题颜色为黄色
$--color-primary: yellow;
5、生成样式文件
et
执行上面的命令会默认找项目根目录下的element-variables.scss文件，并在项目根目录下生成theme文件夹，里面为生成的样式文件。
如果手动指定了变量文件，则需要使用-c来指定，-o可以指定输出样式文件的目录
et -c src/styles/vars.scss -o src/styles/theme
6、使用
全局使用，在main.js直接引入生成的样式文件
import '../theme/index.css'
按需使用：配合babel-plugin-component插件一起使用，指定styleLibraryName的值为生成的样式文件的相对路径，相对于.babelrc文件的路径，需要加上~。
{
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "~theme"
}
]
]
}
扫一扫
1102
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
