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

Question

首先，我希望你们要温柔。我最近一年没有写太多代码，自从 gulp 更新后，我将语法更改为编写函数和导出，然后我以某种方式使其工作，并且到目前为止没有任何更改，不知道他们是否更改了其他内容.我对它现在的样子很满意，但我不知道如何让它以另一种方式工作。

所以不管怎样，我现在正在做一个项目，那里会有很多 html，每个都有完全不同的风格，但有些会很常见。我想为每个 html 创建一个具有通用样式的 main.scss 文件，但我想为每个 html 创建一个具有特定样式的单独 scss。通过这种方式，我最终想要一个单独的 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 )

这是我现在的 gulp 文件：

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 instead of gulp-sass at this point. See sass @use rule.

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

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

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

Gulpfile: How to compile each SCSS into separate CSS with same name but with additional common styles

css

sass

gulp