Discussion on: How to import Sass/SCSS mixins global?

View post

Replies for: 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 :)

Jordan Kicklighter • Dec 16 '20

You bet, good luck!

Dennis Frijlink • Dec 20 '20

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 plugin craco-sass-resources-loader I managed to load a global SCSS file called utils.scss:

const sassResourcesLoader = require('craco-sass-resources-loader');

module.exports = {
  mode: "development",
  output: {
    path: __dirname
  },
  plugins: [
    {
      plugin: sassResourcesLoader,
      options: {
        resources: './src/assets/scss/utils.scss',
      },
    },
  ]
};

In the utils.scss I simply import all the main SCSS files I wanna use (think of mixins, breakpoints etc.):

/* import scss utilities */
@import './breakpoints';
@import './mixins';