从node_modules导入SASS部分

Question

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

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

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

Answer 1

您的问题与此类似：Sass import not crawling node_modules to find appropriate package

您可以通过将includePaths参数传递给gulp sass来包含路径。 e.g

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

Answer 2

对于其他任何偶然发现的人，如果您使用gulp-ruby-sass代替node-sass，则会使用

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

而不是

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

Answer 3

使用includePaths或者你可以解决这样的NPM模块：

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

这个sass-globbing有一些库，但我个人不喜欢这种方法，因为CSS在导入顺序方面很重要。

最佳做法是恕我直言创建一些文件vendor.scss;

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

然后导入此vendor.scss：

@import "vendor.scss"

@import "partials/..."

Answer 4

您可以将node_modules包含在Sass路径中：

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

然后您可以像这样导入库的sass：

@import "bootstrap/scss/bootstrap";

或者，对于material-components-web：

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

这种方式：

• 您不需要将每个库添加到路径
• 子依赖项导入将无缝运行，例如MDC示例中的mdc-top-app-bar导入“ @ material / elevation / mixins”。