I've got a strange problem using sass and code splitting, probably with nesting only.

What happened is, my imported component (using loadable) did not load in production build. I din't get any kind of error or indication what's wrong.

Structure is as follows:

When I import the sass file person-list.scss in PersonList.tsx it requires me to import a (dummy) sass file in PersonsRoot.tsx too, otherwise the component PersonsList will not get loaded.

This is what I use in my project: create-react-app (react-scripts-ts), react-router 4, redux 4, react-app-rewired, react-app-rewire-scss

Here I uploaded a project to github for easy reproduction:

Am I doing something wrong or is it maybe a bug?

I'have also posted this issue on stackoverflow

Update:
Webpack seems to have an array of 545 modules but tries to access the element with index 545 which is of course undefined (0 based index).

TypeError: Cannot read property 'call' of undefined

o (main.9cac5c4f.js:formatted:26)
544 (persons-list.scss:1)
o (main.9cac5c4f.js:formatted:26)
543 (persons-list.scss?3174:4)
o (main.9cac5c4f.js:formatted:26)
542 (1.56e5fc78.chunk.js:1)
o (main.9cac5c4f.js:formatted:26)
Promise.then (async)
loader (routes.ts:6)
f (main.9cac5c4f.js:formatted:6499)
v (main.9cac5c4f.js:formatted:6566)
n (main.9cac5c4f.js:formatted:6591)
Ii (main.9cac5c4f.js:formatted:11110)
da (main.9cac5c4f.js:formatted:11833)
ha (main.9cac5c4f.js:formatted:11854)
Ga (main.9cac5c4f.js:formatted:12109)
Ya (main.9cac5c4f.js:formatted:12068)
Ha (main.9cac5c4f.js:formatted:12056)
za (main.9cac5c4f.js:formatted:12011)
ba (main.9cac5c4f.js:formatted:11941)
enqueueSetState (main.9cac5c4f.js:formatted:10547)
O.setState (main.9cac5c4f.js:formatted:7392)
t (main.9cac5c4f.js:formatted:6630)
(anonymous) (main.9cac5c4f.js:formatted:6638)
Promise.then (async)
n._loadModule (main.9cac5c4f.js:formatted:6637)
n.componentWillMount (main.9cac5c4f.js:formatted:6608)
li (main.9cac5c4f.js:formatted:10594)
Ii (main.9cac5c4f.js:formatted:11117)
da (main.9cac5c4f.js:formatted:11833)
ha (main.9cac5c4f.js:formatted:11854)
Ga (main.9cac5c4f.js:formatted:12109)
Ya (main.9cac5c4f.js:formatted:12068)
Ha (main.9cac5c4f.js:formatted:12056)
za (main.9cac5c4f.js:formatted:12011)
ba (main.9cac5c4f.js:formatted:11941)
ou (main.9cac5c4f.js:formatted:12498)
au (main.9cac5c4f.js:formatted:12508)
hu.render (main.9cac5c4f.js:formatted:12705)
(anonymous) (main.9cac5c4f.js:formatted:12599)
eu (main.9cac5c4f.js:formatted:12435)
vu (main.9cac5c4f.js:formatted:12598)
render (main.9cac5c4f.js:formatted:12755)
(anonymous) (main.9cac5c4f.js:formatted:7334)
o (main.9cac5c4f.js:formatted:26)
(anonymous) (main.9cac5c4f.js:formatted:6753)
o (main.9cac5c4f.js:formatted:26)
(anonymous) (main.9cac5c4f.js:formatted:100)
(anonymous) (main.9cac5c4f.js:formatted:101)

Using the latest version of react app rewired, I am unable to use the package.
getLoader is no longer available.

> react-app-rewired start

getLoader is not a function
npm ERR! code ELIFECYCLE
npm ERR! errno 1

Dependencies

"react-app-rewire-scss": "^1.0.2",
"react-app-rewired": "^2.0.2"

I got this error

The "getBabelLoader" helper has been deprecated as of v2.0. You can use customize-cra plugins in replacement - https://github.com/arackaf/customize-cra#available-plugins
error Command failed with exit code 1

"react-app-rewire-scss": "^1.0.2",
"react-app-rewired": "^2.1.4",

I want to use react-app-rewire-scss with a Storybook Custom Webpack Configuration. It should be as simple as this:

const rewireSass = require('react-app-rewire-scss');

module.exports = (baseConfig, env, defaultConfig) => {
    config = rewireSass(defaultConfig, env);
    return config;
};

However, the fileLoader.exclude array is undefined, so this line fails:

fileLoader.exclude.push(sassExtension);

Adding this line before the above fixes the issue:

if(!fileLoader.exclude) fileLoader.exclude = [];

I can create a PR if this is an agreeable fix.

Hi,

I usually manage with webpack. But I'm confused right now because my client uses customize-cra.

The image specified in scss file backgroup-image does not appear.

[scss file]

[config-overrides.js]

Do I need more settings in my code?

Thank you in advance.

If I go here: https://github.com/timarney/react-app-rewired/tree/master/packages

I can see this: https://github.com/timarney/react-app-rewired/tree/master/packages/react-app-rewire-sass

but it says: This package has been deprecated and moved to react-app-rewire-scss.

But it doesn't show in Community Maintained Rewires in Readme. Why?

It's easier to use than facebook's solution (https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc)?

Could you please update dependencies?
react-app-rewire-scss > node-sass > request > tunnel-agent
react-app-rewire-scss > node-sass > request > hawk > sntp > hoek
react-app-rewire-scss > node-sass > request > hawk > hoek
react-app-rewire-scss > node-sass > request > hawk > cryptiles > boom > hoek
react-app-rewire-scss > node-sass > request > hawk > boom > hoek

The message about these vulnerabilities are really annoying every time when install new package. If it is possible from your side, please, fix it.

All info about vulnerabilities can be seen after running command npm audit.

Also thanks for such great package which helps to reduce a lot of time in development!

react-app-rewired-scss doesn't appear to be compatible with react-app-rewired v2.2.1. I get a dependency error when attempting to resolve. If I try to force the install I get a gyp error.

Regarding line 16 in README.md:

The context of the grammar here seems semi-important:

As-is meaning: Rewire your app as opposed to modifying config-overrides.js

Should be: Rewire your app and then modify config-overrides.js

TLDR: change "than" to "then"

Hello Developer, i am facing following error when i am running app by npm start

react-app-rewired start

node_modules/react-app-rewire-scss/index.js:26
        use: [...cssRules.loader, { loader: 'sass-loader', options: sassLoaderOptions }],
                          ^

TypeError: cssRules.loader is not iterable
    at /home/vinay/Documents/react/save-simply-web-console/node_modules/react-app-rewire-scss/index.js:26:27
    at Object.override [as webpack] (/home/vinay/Documents/react/save-simply-web-console/config-overrides.js:11:12)
    at Object.<anonymous> (/home/vinay/Documents/react/save-simply-web-console/node_modules/react-app-rewired/scripts/start.js:13:13)
    at Module._compile (internal/modules/cjs/loader.js:654:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:665:10)
    at Module.load (internal/modules/cjs/loader.js:566:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:506:12)
    at Function.Module._load (internal/modules/cjs/loader.js:498:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:695:10)
    at startup (internal/bootstrap/node.js:201:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:516:3)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: `react-app-rewired start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/vinay/.npm/_logs/2018-09-04T10_17_14_594Z-debug.log

this is happening because cssRules.loader is undefined.

similar issue you can find here: timarney/react-app-rewired#268

Work around i found:

     const cssRuleLoader = cssRules.loader || cssRules.use; 
     
      sassRules = {
        test: sassExtension,
        use: [...cssRuleLoader, { loader: 'sass-loader', options: sassLoaderOptions }],
      };