Path 使用gulp sass查看多个目录

我在两个不同的目录中有

.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

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

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

现在我得到了以下错误：

file to import not found or unreadable: _mixins

---

似乎无法在

/common/styles

目录中查看

.scss

文件…

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

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

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

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

然后，由于要从

/common/styles

导入文件，因此只需gulp即可将scss文件定位在

/blog/styles

中。因此，您的吞咽功能可以如下所示：

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

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

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

---

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

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

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