Gulp 从node_modules导入SASS部分

rn0zuynd 于 2022-12-08 发布在 Gulp

关注(0)|答案(4)|浏览(257)

尝试用gulp、panini、mustache、sass构建自定义工作流，我的一个问题是包括node_modules中的部分内容，下面是来自main.scss文件的示例：

@import "node_modules/bootstrap/scss/mixins";
@import "settings";

如何避免键入_mixins.scss的完整路径？

4条答案

你的问题与此类似：Sass导入未搜索node_modules以查找相应的程序包
可以通过将includePaths参数传递给gulp sass来包含路径。

.pipe($.sass({
  includePaths: ['node_modules/bootstrap/scss/', 'another/path']
})

您可以在sass路径中包含node_modules：

.pipe(sass({
  includePaths: ['node_modules']
})

然后，您可以导入库的sass，如下所示：

@import "bootstrap/scss/bootstrap";

或者，在材料-组件-网的情况下：

@import "@material/top-app-bar/mdc-top-app-bar";

这一来：

对于其他人来说，如果你使用gulp-ruby-sass而不是node-sass，你应该使用

loadPath: ['node_modules/bootstrap/scss/']

代替

includePaths: ['node_modules/bootstrap/scss/']

使用includePaths，或者您可以像这样解析NPM模块：

@import "~bootstrap/scss/mixins";
@import "settings";

有一些sass-globbing的库，但我个人不喜欢这种方法，因为在CSS中，导入顺序很重要。
最好的做法是IMHO创建一些文件vendor.scss;

@import "~bootstrap/scss/mixins";
@import "~bourbon/...";

然后导入vendor.scss：

@import "vendor.scss"

@import "partials/..."