观看使用一饮而尽 - 萨斯

Question

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

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

有在./blog/styles一个名为blog.scss，我从进口./blog/styles/（即同一目录）.scss文件和./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导入文件，你应该只需要吞掉瞄准SCSS文件中./blog/styles。所以你的吞咽功能可能看起来像这样：

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

Answer 2

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

而不是在你的blog.scss相对路径，您将一饮而尽的任务有指向你的common/styles目录中的负载路径并调用部分进口的，你原来做过。

编译器的任务将寻找进口当前src目录内，然后看在载荷路径。