DEV Community

loading...

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

jwkicklighter profile image
Jordan Kicklighter

You bet, good luck!

Thread Thread
dennisfrijlink profile image
Dennis Frijlink Author

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',
      },
    },
  ]
};
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode
Forem Open with the Forem app