使用 gulp 配置 tailwindcss + sass
主要插件 gulp-postcss (opens new window) 主要插件 gulp-sass (opens new window)
# 安装 postcss
npm install --save-dev postcss gulp-postcss sass gulp-sass
1
# 安装 tailwindcss
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
1
# 基本使用
var gulp = require("gulp");
var sass = require("gulp-sass")(require("sass"));
var postcss = require("gulp-postcss");
function buildStyles(cb) {
var plugins = [require("tailwindcss")];
return gulp
.src("./web/**/*.scss")
.pipe(sass().on("error", sass.logError))
.pipe(postcss(plugins))
.pipe(gulp.dest("./web/dist"));
cb();
}
exports.buildStyles = buildStyles;
exports.watchSass = function(cb) {
gulp.watch("web/**/*.scss", buildStyles);
cb();
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
上次更新: 2023/09/22, 16:54:32