编译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"));
  // 压缩nprogress
  src("./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