每个公司的主题风格肯定是不一样的,比如现在的公司主题就是#00ab7a。在PC端TO-B的项目中少不了用element-ui
,这个时候用element-theme-chalk
直接本地编译修改了element全局的主题色。
一.修改默认主题配色
1. 全局安装element-theme
npm install element-theme -g
2. 在vue中安装element-theme-chalk到dev生产环境
npm install element-theme-chalk -D
3. 初始化变量文件element-variables.scss
et -i
4. 修改主题配色
5.编译为prd环境代码
et
6. 在vue中引入element-ui
7. 如果报错 primordials is not defined
执行文章来源:https://www.toymoban.com/news/detail-407188.html
npm install element-themex -g
二. 切换主题
当只有一个主题不需要切换的时候,使用element-theme-chalk
就足够了,但是当主题很多的时候,最好使用gulp
预处理一下。
GitHub地址https://github.com/gulpjs/gulp文章来源地址https://www.toymoban.com/news/detail-407188.html
- 将 gulp 全局删除
npm rm --global gulp
- 全局安装
npm install --global gulp-cli
- 进入到有package.json的根目录中执行
npm install --save-dev gulp
npm install gulp-clean-css -D # 安装gulp-clean-css
npm install gulp-css-wrap -D # 安装gulp-css-wrap
# or 一起安装
npm install gulp gulp-clean-css gulp-css-wrap -D
- 在根目录新建gulpfile.js 文件
// gulpfile.js
const path = require('path');
const gulp = require('gulp');
const cleanCSS = require('gulp-clean-css');
const cssWrap = require('gulp-css-wrap');
const className = 'theme-green';
const customThemeName = `.${className}`;
/* 找需要添加命名空间的css文件,支持正则表达式 */
// element-change是任务名称,也可以用default
gulp.task('element-change', () => gulp.src(path.resolve(`./theme/index.css`), { allowEmpty: true })
.pipe(cssWrap({ selector: customThemeName })) // 这个 customThemeName 相当于要给 body 添加的 class
.pipe(cleanCSS())
.pipe(gulp.dest(`src/themes/${className}`))); /* 存放的目录 */
- 执行 gulp任务
gulp element-change
- 将element的font文件夹copy到
theme-green
中
- 最后在入口文件中引入index.js
到了这里,关于前端项目review之修改element-ui全局主题颜色配置element-theme-chalk和gulp的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!