【问题标题】:Gulp sass compile replicating scss filesGulp sass 编译复制 scss 文件
【发布时间】: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 文件。

标签: css sass gulp


【解决方案1】:

我已经通过换行解决了这个问题

return gulp.src('./src/sass/**/*.scss')

到:

return gulp.src('./src/sass/styles.scss')

【讨论】:

  • 不知道您可以设置它以便在不使用 include 语句的情况下编译所有内容。不错!
  • @disinfor 你不能,这个答案不会包含除styles.scss 之外的任何其他代码,除非styles.scss 中有导入语句。也许这是我不知道的意图。如果最终的styles.css 应该包含themes/ scss 文件,那么如果没有import,此代码将无法工作。
  • @Mark 那么我对这个问题的初步评论是正确的。我以为我发现了一些新东西。