ElementUI源码阅读——Button组件样式

Element源码组件皮肤样式位置

个人用ElementUI写项目好久了，但是只是知道该怎么用，从来没有研究过原理，于是准备开坑一个ElementUI源码阅读的篇章。
今天讲的是组件皮肤样式篇。

|--.github
|--build
|--examples
|--lib
|--node_modules
|--packages
    |--theme-chalk  <--- 今天要讲的在这里
|--src
|--test
|--types
...

这个目录下找到了gulp的编译配置文件gulpfile.js。

"use strict";

const {
    series, src, dest } = require("gulp");
const sass = require("gulp-sass");
const autoprefixer = require("gulp-autoprefixer");
const cssmin = require("gulp-cssmin");

function compile() {
   
  return (
    src("./src/*.scss")
      .pipe(sass.sync())
      .pipe(
        autoprefixer({
   
          browsers: ["ie > 9", "last 2 versions"],
          cascade: false,
        })
      )
      .pipe(cssmin())
      .pipe(dest("./lib"))
  );
}

function copyfont() {
   
  return src("./src/fonts/**")
    .pipe(cssmin())
    .pipe(dest("./lib/fonts"));
}

exports.build = series(compile, copyfont);

这里有两个task。

我们先来看看其中的compile。

先使用了同步编译，编译src下所有的scss文件。

src("./src/*.scss")
      .pipe(sass.sync())

配置浏览器兼容 ,添加css前缀。

.pipe(
  autoprefixer({
   
     browsers: ["ie > 9", "last 2 versions"],
     cascade: false,
   })
 )

将启用css压缩，将scss编译成css到lib目录（此时使用npm run build:theme，就可以看到lib目录了）

.pipe(cssmin())
.pipe