如果你的项目使用的是SCSS来编写的css样式
1、因为Element 的 theme-chalk 使用的是 SCSS 编写,然后自己的项目,用的也是scss来写的css样式,那么可以直接在自己的项目中改变 Element 的样式变量
2、新建一个样式文件,例如 element-variables.scss,写入以下内容
/* 改变主题色变量 */
$--color-primary: #17b3a3!default;
/* 改变 icon 字体路径变量,必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';
@import "~element-ui/packages/theme-chalk/src/index";
3、在自己项目的入口文件main.js中,直接引入以上样式文件即可(无需引入 Element 编译好的 CSS 文件)
import Vue from 'vue'
import Element from 'element-ui'
import './element-variables.scss'
Vue.use(Element)
需要注意的是,覆盖字体路径变量是必需的,将其赋值为 Element 中 icon 图标所在的相对路径即可。
如果你的项目使用的不是SCSS来编写的css样式
1、安装elementUI
npm i element-ui -S
2、安装主题工具
npm i element-theme -g
3、安装chalk主题
npm 安装(推荐)
npm i element-theme-chalk -D
或者GitHub 拉取最新代码 npm i github.com/ElementUI/t… -D
4、修改theme的sass文件
主题生成工具安装成功后,如果全局安装可以在命令行里通过 et 调用工具,如果安装在当前目录下,需要通过 node_modules/.bin/et 访问到命令。执行 -i 初始化变量文件。默认输出到 element-variables.scss,当然你可以传参数指定文件输出目录。
et -i // [可以自定义变量文件,默认为element-variables.scss]
> ✔ Generator variables file //表示成功
此时项目根目录下会产生 element-variables.scss 文件,内部包含了主题所用到的所有变量,它们使用 SCSS 的格式定义的,大致如下:
5、直接编辑编辑 element-variables.scss 文件,修改为自己所需要的颜色主题色
例如: $--color-primary: #17b3a3!default;
6、编译主题
修改完变量后,到命令行里执行 et 编译主题(如果编译后,再次修改了变量,需要重新编译)
et
> ✔ build theme font
> ✔ build element theme //表示从新编译成功
执行主题编译命令生成主题,根目录会生成 theme 文件夹 。需要引入这个文件夹里的 css、font 等资源。(theme文件夹里有font文件夹和大量的css文件,css文件只留下index.css,其他的css文件都可以删掉,因为index.css中的样式包含其他全部css文件的样式。)
7、引入自定义主题,在main.js文件中引入:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui' // 这里
import '../theme/index.css' // 这里
// import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
8、在vue组件中使用自己定义的主题
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
结果如图所示:
8、搭配插件按需引入组件主题
相关链接:element.faas.ele.me/#/zh-CN/com…
借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的。
首先,安装 babel-plugin-component:
npm install babel-plugin-component -D
然后,将 .babelrc 修改为:
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
// "styleLibraryName": "theme-chalk",// 变成我们自己手动生成的主题
"styleLibraryName": "~theme"
}
]
]
}