Overriding sass includePaths

Hi there, and thank you for this plugin!

I’m using craco@2.2.0, react-scripts@2.1.1, and node-sass@4.10.0 (all latest as of today)

I’m attempting to “un-eject” from CRA for an existing project, so I came upon your plugin. One of the requirements is that we load a set of theme variables based on an environment variable that is passed in at build time. I’d like to use includePaths to direct Sass where to look for these variables, but I’m having a difficult time getting it to compile using my includePaths.

Here’s my craco.config.js:

const path = require('path');

module.exports = function({ paths }) {
    const sassIncludePaths = [
        path.resolve(__dirname, `${paths.appSrc}/theme/${process.env.REACT_APP_CLIENT_KEY}/styles`),
        path.resolve(__dirname, `${paths.appSrc}/styles/util`)
    ];

    return {
        style: {
            sass: {
                loaderOptions: {
                    includePaths: sassIncludePaths
                }
            }
        }
    };
};

I may just be reading this wrong, but noticed that on line 56 of sass.js, overrideLoader is called with styleConfig.sass.loaderOptions as its second parameter: https://github.com/sharegate/craco/blob/master/packages/craco/lib/features/style/sass.js#L56

matches.forEach(x => {
    overrideLoader(x, styleConfig.sass.loaderOptions);
                                    // ^
});

And then within overideLoader, the second parameter gets a loaderOptions property referenced: https://github.com/sharegate/craco/blob/master/packages/craco/lib/features/style/sass.js#L38

function overrideLoader(match, sassOptions) {
    if (sassOptions.loaderOptions) {
                 // ^
        applyLoaderOptions(match, sassOptions.loaderOptions);
                                           // ^
    }
    ...
}

But sassOptions is loaderOptions, so I’d think the above should really be:

function overrideLoader(match, sassOptions) {
    if (sassOptions) {
        applyLoaderOptions(match, sassOptions);
    }
    ...
}

Or I should change my config to:

{
    style: {
        sass: {
            loaderOptions: {
                loaderOptions: {
                    includePaths: sassIncludePaths
                }
            }
        }
    }
}

When I make the above change to my config, I can see that the webpack config has changed by logging out the config just before the return line in overrideSass.

The problem is that even with the above fix, I still cannot seem to get @import 'color' to work, when _color.scss is a file located in one of the above includePaths. It’s currently trying to import node_modules/color/index.js.

Any help would be very much appreciated!

[patricklafrance]

Thank you for reporting the bug! There was indeed a problem, the patch is available in package version 2.2.1

[fraincs]

The problem seems to be that color is available as a node module, have you tried renaming your color.scss to something else.