path - 使用 gulp-sass 监视多个目录

Question

我.scss在两个不同的目录中有文件：

./blog/styles/
./common/styles/

有一个文件./blog/styles被调用blog.scss，我正在.scss从./blog/styles/（即同一目录）和./common/styles/.

我应该如何创建 gulp 任务来查看这两个目录并.css在其他地方创建最终文件（比如./dist）？

这是我目前的任务：

gulp.task('sass', function () {
    gulp.src(['./blog/styles/*.scss', './common/styles/*.scss'])
        .pipe(sass())
        .pipe(gulp.dest('./dist/style.css'));
});

我blog.scss只使用这样的名称导入文件：

@import "forms"; //from the same directory
@import "_mixins"; //from ./common/styles
@import "_common"; //from ./common/styles

现在我收到以下错误：

file to import not found or unreadable: _mixins

似乎看不到目录中的.scss文件./common/styles...

Answer 1

您需要提供要导入的 sass 文件的相对路径。因此，将导入代码更改为如下所示：

@import "forms";
@import "../../common/styles/_mixins";
@import "../../common/styles/_common";

然后，由于您要从中导入文件，./common/styles因此您应该只需要 gulp 将 scss 文件定位到./blog/styles. 所以你的 gulp 函数可能看起来像这样：

gulp.task('sass', function() {
    gulp.src('./blog/styles/blog.scss')
        .pipe(sass())
        .pipe(gulp.dest('./dist/style.css'));
});

Answer 2

您也可以为此使用 sass 加载路径。

与其在 blog.scss 中使用相对路径，不如将 gulp 任务设置为具有指向 common/styles 目录的加载路径，并像最初那样调用部分导入。

编译器任务将在当前 src 目录中查找导入，然后查找加载路径。