That would be my guess about where the problem lies. If I'm not mistaken, doesn't the Next configuration actually have the global scss file declared somewhere? I believe this is imported into webpack's chain in a way that makes it available to the Sass compiler. So there should be some way to accomplish the same thing outside of Nuxt.
Alright. I will take a look at the configuration of webpack and I how I can fix the global .scss mixins. Thanks for your help and the explanation of sass + webpack! I will sign you if it works :)
First of all. Thanks for your support. After searching and testing I started to use CRACO (Create React App Configuration). CRACO is an easy and comprehensible configuration layer for create-react-app based on the structure of Webpack. It kinds of overwrites the rules of webpack you specify in the craco.config.js file. With the plugin craco-sass-resources-loader I managed to load a global SCSS file called utils.scss:
That would be my guess about where the problem lies. If I'm not mistaken, doesn't the Next configuration actually have the global scss file declared somewhere? I believe this is imported into webpack's chain in a way that makes it available to the Sass compiler. So there should be some way to accomplish the same thing outside of Nuxt.
Here is an answer in Stack Overflow that's discussing this exact problem (except variables instead of mixing) stackoverflow.com/a/35554536
Alright. I will take a look at the configuration of webpack and I how I can fix the global
.scss
mixins. Thanks for your help and the explanation of sass + webpack! I will sign you if it works :)You bet, good luck!
Hey Jordan,
First of all. Thanks for your support. After searching and testing I started to use CRACO (Create React App Configuration). CRACO is an easy and comprehensible configuration layer for create-react-app based on the structure of Webpack. It kinds of overwrites the rules of webpack you specify in the
craco.config.js
file. With the plugincraco-sass-resources-loader
I managed to load a global SCSS file calledutils.scss
:In the
utils.scss
I simply import all the main SCSS files I wanna use (think of mixins, breakpoints etc.):