编译elementUI主题scss

element Vue2工程

1.  安装包

"gulp": "^4.0.2",
"gulp-autoprefixer": "^8.0.0",
"gulp-minify-css": "^1.2.4",
"gulp-sass": "^4.0.2",
"gulp-uglify": "^3.0.2",

2. theme.js

// 编译生成ElementUI主题
// yarn run theme 生成文件比较小，建议此方式，https://blog.csdn.net/weixin_36813246/article/details/126985045

const { series, src, dest } = require("gulp");
const sass = require("gulp-sass");
const autoprefixer = require("gulp-autoprefixer");
const cssmin = require("gulp-minify-css");
const jsmin = require("gulp-uglify");function compile() {// 压缩字体图标src("./src/assets/iconfont.css").pipe(cssmin()).pipe(dest("./public/css"));// 压缩nprogresssrc("./src/assets/nprogress/nprogress.css").pipe(cssmin()).pipe(dest("./public/css"));src("./src/assets/nprogress/nprogress.js").pipe(jsmin()).pipe(dest("./public/js"));return (src("./src/assets/element.scss")// 转成CSS
      .pipe(sass())// 浏览器兼容性
      .pipe(autoprefixer({// 美化前缀cascade: true,}))// 压缩
      .pipe(cssmin())// 输出目录.pipe(dest("./public/css"))); // 在当前目录下的assets文件夹输出最终文件
}
exports.build = series(compile);

3. 添加package.json命令

"theme": "gulp build --gulpfile theme.js"

4. 执行

yarn theme