How to setup Webpack using Create-React-App for sass-resources-loader?

Question

I'd like to build a project with CSS modules + SASS. I'd like to have some global styles (mixins, variables, functions etc), that will be available in every component.module.scss. For that I need to import my global styles to every single module style file. As I expect to have a lot of components, I was looking for options to do this automatically. I've found sass-resourcess-loader ,might help with that.

However, as I don't have any experiencies with Webpack, I have troubles to setting it up.

What I did so far:

Created my react app with create-react-app
Installed node-sass and sass-resources-loader
In my project-folder/node_modules/react-scripts/webpack.config.js on line 595 I've added

{ test: /.scss$/, use: [ { loader: "style-loader", }, { loader: "css-loader", }, { loader: "sass-loader", }, { loader: "sass-resources-loader", } ], }

Sorry I cannot get that code snippet styled properly somehow. Also I've tried options field:

options: {
 resources: "./src/global.scss"
}

But nothing works, I still get undefined variable in my modular scss file.

What am I doing wrong? Or is there another way to resolve this problem?

MadGrip · Accepted Answer · 2021-05-31 18:02:56Z

9

Okay so I've find solution with CRACO (Create React App Configuration Override).

1) I've uninstalled sass-reasources-loader as is not needed anymore and reverted the changes in webpack.config.js

2) Installed CRACO and craco-sass-resources-loader

3) Created craco.config.js file inside root directory of my project and added this:

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

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

4) In package.json I've changed the scripts to:

"start": "craco start",

"build": "craco build",

Now everything works. If you need more info, click on the links provided in step 2.

answered May 31, 2021 at 18:02

MadGrip

4716 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

sagg1295 Over a year ago

Anyone who is using typescript with cra can get Parsing error: "parserOptions.project" has been set for @typescript-eslint/parser. using eslint for linting purpose. They can follow this thread for solving their error stackoverflow.com/questions/58510287/…

Collectives™ on Stack Overflow

How to setup Webpack using Create-React-App for sass-resources-loader?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related