Hi there, and thank you for this plugin!
I'm using [email protected], [email protected], and [email protected] (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!