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:
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.):