Question

我有以下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 的方法。< / p>

我希望这是有道理的。

Answer 1

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

Answer 2

使用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

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

2 个答案: