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
- 上一篇 »经典完整java面试题大全
- 下一篇 »Linux生成大文件