elementui 切换主题,生成对应主题的css文件,批量为css文件扩展命名空间 gulp-css-wrap

cnpm i gulp gulp-css-warp gulp-clean-css --save-dev

cnpm -g gulp

然后在项目根目录新建gulpfile.js:

var path=require('path');

var gulp=require('gulp');

var cleanCss=require('gulp-clean-css');

var cssWrap=require('gulp-css-wrap');

var merge=require('merge-stream');

gulp.task('wrap-css',function(){

var theme1=gulp.src(path.resolve('./element/theme1/index.css'))

/*找需要需要添加命名空间的css文件,支持正则表达式*/

.pipe(cssWrap({selector:'.theme1'}))/*添加命名空间*/

.pipe(cleanCss())

.pipe(gulp.dest(path.resolve(''./src/assets/theme/theme1")));/*添加完命名空间的文件的存放目录*/

var theme2=gulp.src(path.resolve('./element/theme2/index.css'))

/*找需要需要添加命名空间的css文件,支持正则表达式*/

.pipe(cssWrap({selector:'.theme2'}))/*添加命名空间*/

.pipe(cleanCss())

.pipe(gulp.dest(path.resolve(''./src/assets/theme/theme2")));/*添加完命名空间的文件的存放目录*/

return merge(theme1,theme2);

});

然后在命令行运行:gulp css-wrap 就生成了添加过类名的css文件啦

参考:https://blog.csdn.net/weixin_33843947/article/details/94754247