1

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.

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.

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.

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

My configuration looks like the following 

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

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

An @import loop has been found:

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

Thanks

Brady Edgar
  • 486
  • 7
  • 27

1 Answers1

2

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};
  }
},

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

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

Rae Gaines
  • 36
  • 3