生成不同的css颜色文件,每个文件内部命名前加上.custom-颜色值做命名空间。
然后app.vue里引入全部的颜色文件。
用户点击某颜色,就在body加上class:custom-00a597
这样通过body的class改变就能实现真正使用不同的css文件。
如颜色值为#00a597的css文件 ,我里面的每个选择器都加上了.custom-00a597
颜色值为#0000ff的css文件,加上了.custom-0000ff
怎么批量加呢?
这里使用gulp-css-wrap这个神器
1.搭建gulp环境
搭建环境在项目的代码环境中搭建。
//1.安装gulp:
npm install gulp
//2.安装gulp-clean-css
npm install gulp-clean-css
//3.安装gulp-css-wrap
npm install gulp-css-wrap
2.在项目根目录下创建一个名为 gulpfile.js 的文件:
// gulpfile.js
var path = require(\'path\')
var gulp = require(\'gulp\')
var cleanCSS = require(\'gulp-clean-css\')
var cssWrap = require(\'gulp-css-wrap\')
gulp.task(\'css-wrap\', function () {
return gulp.src(path.resolve(\'./theme/index.css\'))
/* 找需要添加命名空间的css文件,支持正则表达式 */
.pipe(cssWrap({
selector: \'.custom-1b1e24\' /* 添加的命名空间 */
}))
.pipe(cleanCSS())
.pipe(gulp.dest(\'src/assets/css/theme/1b1e24\')) /* 存放的目录 */
})
3.执行gulp输出
//命令行
gulp css-wrap
1、使用命令行主题工具生成css文件
2、 用vue-cli安装一个新项目:
3、 安装elementUI及sass-loader,node-sass
(项目中使用scss编写需要依赖的插件)
//安装elementui
npm i element-ui -S
//安装sass
npm i sass-loader node-sass -D
4、 安装elementui的自定义主题工具
//首先安装主题工具
npm i element-theme -g
//然后安装chalk主题
npm i element-theme-chalk -D
5、 初始化变量文件
et -i [可以自定义变量文件,默认为element-variables.scss]
这时根目录下会产生element-variables.scss(或自定义的文件)
6、修改变量
直接编辑 element-variables.scss 文件,例如修改主题色为自己所需要的颜色(如: 紫色(purple))
$--color-primary: purple7、编译主题
et
编译完之后会在根目录生成theme的文件夹.
只需要引入theme/index.css即可
8、引入自定义主题
将编译好的主题文件引入项目(编译的文件默认在根目录下的theme文件下,也可以通过 -o 参数指定打包目录),在入口文件main.js中引入
import \'../theme/index.css\'
import ElementUI from \'element-ui\'
import Vue from \'vue\'
Vue.use(ElementUI)
9、测试是否成功
<el-button type="primary">主要按钮</el-button>
4、动态切换主题1、将修改好的不同css颜色文件放到一个文件夹
1、换肤内容
5、动态切换逻辑当前颜色值存在vuex里。修改或拿取都通过vuex管理
用户点击颜色值v-model绑定