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

View post

Replies for: 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 o...

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