【发布时间】:2019-07-09 16:15:57
【问题描述】:
我正在使用 GULP 编译我的 scss 文件并尝试将其编译为单个 styles.css 文件。但是,当我运行 gulp sass 时,它会将 scss 文件转换为 css,但也会复制它们,而不是将它们全部编译成一个文件。
gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('sass', function () {
return gulp.src('./src/sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass.sync({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./src/css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./src/sass/**/*.scss', ['sass']);
});
文件结构
--gulpfile.js
--src
--css
--sass
--themes
--module.scss
--tm-1.scss
--styles.scss
当我运行gulp sass 时,css 输出最终是:
--css
--styles.css
--themes
--module.css
--tm-1.css
我想要的只是一个 styles.css 文件,似乎无法理解我在这里缺少什么。
【问题讨论】:
-
我相信为了做你想做的事,你可能不得不将
import其他(主题scss文件)放入你的styles.scss。基本上在styles.scss中的所有 CSS 之后,添加@import "themes/module";和tm-1相同。您还可以在这些文件前加上下划线_module.scss和_tm-1.scss。这应该可以防止它们被单独编译成 CSS 文件。