我正在使用 _s(下划线)启动 WordPress 主题并尝试使用我自己的 gulp 脚本来执行以下操作:
- 从 ./sass/ 编译 sass 文件(有许多 scss 文件都作为“导入”添加到 ./sass/style.scss 中)
- 为我的 CSS 自动添加前缀
- 创建源映射文件
- compile/autoprefix/sourcemapped 文件应位于名为 style.css 和 style.css.map 的主题 (./) 的根目录中
我让它正常工作 - 它确实生成了我的 style.css 和 style.css.map - 但它只是不添加浏览器前缀。就像 autoprefixer 插件不工作一样。
如何让 autoprefixer 为我的 CSS 添加前缀?我通过添加 transition: all .5s, display: grid 对其进行了测试,并且它们没有前缀。
也没有错误,所以我很茫然。
这是我的 gulpfile.js
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
sass.compiler = require('node-sass');
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
// Compile Sass
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.write())
.pipe(gulp.dest('./'))
// Autoprefix
.pipe(sourcemaps.init({loadMaps: true}))
.pipe(autoprefixer())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./'))
});
gulp.task('watch', function () {
gulp.watch('./sass/**/*.scss', gulp.series('sass'));
});
gulp.task('default', function () {
gulp.watch('./sass/**/*.scss', gulp.series('sass'));
});