首先把官方指导API挂上
在研究elementUI在线切换皮肤功能时,看到大佬经验中都用到了gulp-css-wrap(批量为css文件扩展命名空间)工具。
实现思路:
1.将所有皮肤样式都通过主入口import进来
2.通过点击样式切换事件来改变body的class名
那么问题来了,所有样式都需要增加一个class拓展,手动做?神器来了,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
完事!按照路径看看生成出来的css有什么变化吧!!!