Styjun

Is an acid a salt or not?

Are neural networks prone to catastrophic forgetting?

Can I call 112 to check a police officer's identity in the Czech Republic?

Who has taken "my" Managed package namespace? Can we find out?

How do Windows version numbers work?

Why was hardware diversification an asset for the IBM PC ecosystem?

Why did my rum cake turn black?

Are randomly-generated passwords starting with "a" less secure?

Why are they 'nude photos'?

Why does the autopilot disengage even when it does not receive pilot input?

Shortest distance around a pyramid?

How can an advanced civilization forget how to manufacture its technology?

In Parshas Chukas, why is first mention of Parah Adumah "פָרָה" instead of "פָּרָה"?

Why would guns not work in the dungeon?

Print the last, middle and first character of your code

Why isn't pressure filtration popular compared to vacuum filtration?

definition of "percentile"

What is this welding tool I found in my attic?

Why does the U.S. tolerate foreign influence from Saudi Arabia and Israel on its domestic policies while not tolerating that from China or Russia?

Was I subtly told to resign?

The monorail explodes before I can get on it

Referring to different instances of the same character in time travel

Can I play a first turn Simic Growth Chamber to have 3 mana available in the second turn?

Is lack of functional requirements agile?

How to include SCSS Glob in a Gatsby project?

What's the difference between SCSS and Sass?Import regular CSS file in SCSS file?How to pass options to gatsby-plugin-typographyHow to use global css style sheet includes with GatsbyJSGatsby.js: Load Google Fonts for Typography themes without Render-BlockingCompile partial SCSS-Files with Sass-Globbing in Jetbrains IDEImport sass variables to gatsby componentRunning SASS on Gatsby not workingCertain fonts not working in Typography.js and Gatsby

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

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

sass gatsby

share|improve this question

asked Mar 26 at 3:08

Brady EdgarBrady Edgar

1581212 bronze badges

add a comment | 

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

sass gatsby

share|improve this question

asked Mar 26 at 3:08

Brady EdgarBrady Edgar

1581212 bronze badges

add a comment | 

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

sass gatsby

share|improve this question

asked Mar 26 at 3:08

Brady EdgarBrady Edgar

1581212 bronze badges

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

share|improve this question

asked Mar 26 at 3:08

Brady EdgarBrady Edgar

1581212 bronze badges

share|improve this question

asked Mar 26 at 3:08

Brady EdgarBrady Edgar

1581212 bronze badges

asked Mar 26 at 3:08

Brady EdgarBrady Edgar

1581212 bronze badges

asked Mar 26 at 3:08

Brady EdgarBrady Edgar

1581212 bronze badges

1 Answer
1

active

oldest

votes

0

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.

share|improve this answer

answered May 22 at 19:16

Rae GainesRae Gaines

1

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55349282%2fhow-to-include-scss-glob-in-a-gatsby-project%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

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.

share|improve this answer

answered May 22 at 19:16

Rae GainesRae Gaines

1

add a comment | 

0

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.

share|improve this answer

answered May 22 at 19:16

Rae GainesRae Gaines

1

add a comment | 

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.

share|improve this answer

answered May 22 at 19:16

Rae GainesRae Gaines

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

share|improve this answer

answered May 22 at 19:16

Rae GainesRae Gaines

1

answered May 22 at 19:16

Rae GainesRae Gaines

1

answered May 22 at 19:16

Rae GainesRae Gaines

1