使用 gulp-sass 观看多个目录

Question

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

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

./blog/styles 中有一个名为 blog.scss 的文件，我正在从 ./blog/styles/（即同一目录）和 ./common/styles/ 导入 .scss 个文件。

我应该如何创建 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

似乎无法在 ./common/styles 目录中看到 .scss 个文件...

Answer 1

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

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

然后，由于您是从 ./common/styles 导入文件，因此您应该只需要 gulp 来定位 ./blog/styles 中的 scss 文件。所以你的 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 目录中查找导入，然后在加载路径中查找。

使用 gulp-sass 观看多个目录

Watch multiple directories using gulp-sass

path

sass

gulp

gulp-sass