Question

我目前正在设置使用盖茨比的样板。到目前为止，所有内容都非常简单易用，但是我似乎无法解决一个问题，那就是将SCSS全局与我的全局SCSS样式挂钩。

我目前对每个组件都有本地化的SCSS样式。但是，我也有一个用于全局样式（变量，版式...等）的样式目录。这也使用了SCSS，效果很好。现在，我要做的最后一件事是使SCSS glob正常工作，这样我就可以在全局样式中进行类似/**/*.scss的导入。

当前，我正在使用gatsby-plugin-sass，并且在我的globImporter文件中包括了gatsby-config.js作为选项。但是，它似乎对我没有帮助。

从我读到的node-sass-glob-importer应该是我所需要的，但到目前为止还没有运气。

我的配置如下所示

{
   resolve: `gatsby-plugin-sass`,
   options: {
     importer: globImporter(),
     cssLoaderOptions: {
       camelCase: false,
     },
   },
},

然后我尝试像这样@import "./**/*.scss";在我的scs中进行全局导入，但是出现以下错误：

An @import loop has been found:

任何人都可以在gatsby上设置scss glob或看到我的配置有任何问题。

谢谢

Answer 1

如果您仍然遇到此问题（或者其他任何情况），这对我有用：

options: {
  importer: function(url, prev, done) {
    // url is the path in import as is, which LibSass encountered.
    // prev is the previously resolved path.
    // done is an optional callback, either consume it or return value synchronously.
    // this.options contains this options hash, this.callback contains the node-style callback
    var result = globImporter();
    return {file: result.path, contents: result.data};
  }
},

它受node-sass repo中示例代码的启发。

请确保在文件顶部也包含var globImporter = require('node-sass-glob-importer')。

如何在Gatsby项目中包含SCSS Glob？

1 个答案: