css - 如果更改了其中一个导入，则更新 main.scss 文件

Question

我有以下 SASS 结构: app/css/main.scss(编译成main.css) /components/_.scss(导入到main.scss)

目前我正在查看的唯一文件是 ma​​in.scss。一旦我更改了该文件，它就会检查所有导入并使用所有 _component.scss 刷新 css。

我想要完成的是观察 _component.scss 文件的变化，如果对任何_component.scss 文件。目前，如果导入的 _component.scss 文件之一发生更改，我找不到设置观察者 (GULP) 来更新 ma​​in.scss 的方法。

我希望这是有道理的。

Answer 1

使用 Gulp，您可以查看存储 .scss 文件的整个文件夹。

假设每个 .scss 文件都包含在 scss 文件夹中。 在那里，您将拥有 main.scss(将在 main.css 中转换的文件)和所有部分文件(其名称以 _ 开头。例如您的 _component.scss)。

假设您也有一个名为 stylesheets 的目标文件夹，用于存放已编译的 css 文件。

然后你可以使用下面的Gulp脚本来管理watching进程:

var gulp = require('gulp');
var sass = require('gulp-sass');


gulp.task('sass', function() {
  return gulp.src('./scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./stylesheets'))
});



gulp.task('watch', function() {
    return gulp.watch('scss/**/*.scss', ['sass'])
    .on('change', function(event) {
        console.log('File ' + event.path.slice(event.path.indexOf('/scss/'),event.path.length) + ' was ' + event.type + ', running tasks...');
    });
});

现在使用命令 gulp watch 运行任务 watch。

要了解有关 Gulp-sass 的更多信息，请点击此链接 https://www.npmjs.com/package/gulp-sass