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