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

问题描述

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

I am currently working on setting up a boilerplate that uses Gatsby. Everything so far has been very simple and easy to use, but I can't seem to fix one problem, which is getting SCSS glob hooked up with my global SCSS styling.

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

I currently have localized SCSS styling for each component. However, I also have a styles directory for my global styles(variables, typography...ect). This is also using SCSS and is working great. Now the last thing I want to do is get SCSS glob working so I can do imports like /**/*.scss within my global styles.

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

Currently, I am using the gatsby-plugin-sass and have included globImporter as an option within my gatsby-config.js file. However, it does not seem to do it for me.

从我读到的 node-sass-glob-importer 应该是我所需要的，但到目前为止还算不上运气.

From what I read node-sass-glob-importer should be what I need but no luck so far.

我的配置如下所示

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

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

I then try to do a global import in my scss like so @import "./**/*.scss"; but I get the following error:

已发现@import循环:

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

has anyone set up scss glob on gatsby or see anything wrong with my configurations.

谢谢

推荐答案

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

If you're still having this issue (or in case anyone else is), here's what worked for me:

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 中的示例代码的启发回购.

It was inspired by the example code on in the node-sass repo.

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

Make sure to also include var globImporter = require('node-sass-glob-importer') at the top of your file.

这篇关于如何在Gatsby项目中包含SCSS Glob?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！