Gulpfile：如何将每个 SCSS 编译成具有相同名称但具有其他通用样式的单独 CSS

Question

首先，我希望你们能温柔一点。近年来，我没有进行太多编码，自从 gulp update 之后将语法更改为编写函数并导出时，我以某种方式使其工作，并且到目前为止没有任何更改，不知道他们是否更改了其他内容。我对现在的情况很满意，但我不知道如何让它以另一种方式工作。

所以不管怎样，我现在正在做一个项目，其中会有很多 html，每个都有完全不同的样式，但有些会很常见。我想为每个 html 制作一个包含通用样式的 main.scss 文件，但我想制作一个单独的 scss，其中包含每个 html 特有的样式。这样最后我想要一个单独的 css 文件，由具有相同名称的特定 scss 与 main.scss 组合而成，这样它就不必下载单个大文件，而只需下载我需要的样式。

例子：

main.scss
01.scss
02.scss
03.scss

将编译为：

01.css ( main.scss + 01.scss )
02.css ( main.scss + 02.scss )
03.css ( main.scss + 03.scss )

这是我现在的 gulpfile：

const gulp = require('gulp');
const sass = require('gulp-sass');
const browserSync = require('browser-sync').create();

function style() {
  return gulp.src('./scss/**/*.scss')
   .pipe(sass().on('error', sass.logError))
   .pipe(gulp.dest('./css'))
   .pipe(browserSync.stream());
}

function watch() {
  browserSync.init({
    server: {
      baseDir: './'
    }
  });
  gulp.watch('./scss/**/*.scss', style);
  gulp.watch('./*.html').on('change', browserSync.reload);
  gulp.watch('./js/**/*.js').on('change', browserSync.reload);
}

exports.style = style;
exports.watch = watch;

如果您知道如何以更好的方式做到这一点，我将不胜感激。

Answer 1

我认为您必须将您的main.scss 导入到您的每个其他文件中，并从您的gulp.src 中排除main.scss。

function style() {
  return gulp.src(['./scss/**/*.scss', '!./scss/**/main.scss'])

  .pipe(sass().on('error', sass.logError))
  .pipe(gulp.dest('./css'))
  .pipe(browserSync.stream());
}

'!./scss/**/main.scss' 这否定或排除该文件被传递到此任务 - 我假设 main.scss 与您的其他 scss 文件位于同一文件夹中，如果不是这种情况，您将不得不修改路径.

然后将@import main.scss 放入您的每个01.scss、02.scss 等文件中：

@import "main.scss"; // 也假设在同一个文件夹中

您可以将此导入语句放在文件中的任何位置，如果它是第一个，则main.scss 中的任何一个样式将被0x.scss 文件其余部分中的冲突样式覆盖。如果您将 import 语句放在最后，那么 main.scss 样式将覆盖任何以前的冲突样式。

---

注意：此时您真的应该使用@use 而不是@import 和gulp-dart-sass 而不是gulp-sass。见sass @use rule。

// in your gulpfile.js const sass = require('gulp-dart-sass'); // 安装后

@use "main.scss"; //必须在每个scss文件的顶部，比如01.scss