如果其中一个导入发生更改，则更新 main.scss 文件答案

【问题标题】：Updating main.scss file if one of the imports is changed如果其中一个导入发生更改，则更新 main.scss 文件
【发布时间】：2016-07-13 17:51:44
【问题描述】：

我有以下 SASS 结构： app/css/main.scss（编译为 main.css） /components/_.scss（导入到 main.scss）

我目前正在查看的唯一文件是 main.scss。更改该文件后，它会检查所有导入并使用来自所有 _component.scss 的内容刷新 css。

我想要完成的是观察 _component.scss 文件的更改，如果对任何文件进行了更改，则刷新 main.scss _component.scss 文件。目前，如果导入的 _component.scss 文件之一发生更改，我找不到设置观察程序 (GULP) 以更新 main.scss 的方法。

我希望这是有道理的。

【问题讨论】：

标签： css sass gulp

【解决方案1】：

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

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

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

那么你可以使用下面的 Gulp 脚本来管理观看过程：

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 运行任务监视。

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

【讨论】：

谢谢。除了您的评论之外，我还要补充一点，如果您的 _scss 文件位于组件文件夹中，则您需要从目录的最根目录开始，并且每次更改都需要重新编译 css。否则不会向 main.scss 表明导入已更改。

【解决方案2】：

查看所有 scss 文件，只使用文件掩码（例如：*.scss, **/*.scss）

【讨论】：

一点澄清 - scss 中以下划线开头的文件将被忽略并且不会编译为 css。这样就解决了，但是 main.scss 文件无法检测到对导入的 .scss 文件所做的任何更改。