React-app-rewired: sass example with react-scripts 1.0.11 doesn't work

[srhise]

Tried many different adjustments to the config-overrides.js file, but can't seem to get saas to compile with the current version of react-scripts. It looks like the webpack config files are much different in structure, and also use webpack 3.

I would be glad to help, but want to confirm that this is an issue for others besides myself.

I tried adjusting the config to this, which looks messy but the output looked correct based on the weird oneOf syntax.

config.module.rules[1].oneOf.push({
    test: /\.scss$/,
    use: [
      {
        loader: "style-loader"
      },
      {
        loader: "css-loader"
      },
      {
        loader: "sass-loader",
        options: {
          sourceMap: true
        }
      }
    ]
  });

[timarney]

Yes this will be an issue for others as well as of 1.0.11

I had to update the main package to handle for adding a Babel plugin see getLoader here https://github.com/timarney/react-app-rewired/blob/master/packages/react-app-rewired/index.js

I haven't touched the SASS rewire for quite a long time (not using SASS as much these days myself)

A good first step would be getting this repo working again - https://github.com/timarney/sass-rewire-test
with the 1.0.10 build first than moving it to 1.0.11 to run tests against.

[timarney]

Should be able to use one of the util methods now i.e. getLoader

https://github.com/timarney/react-app-rewired/blob/master/packages/react-app-rewired/index.js

[RIP21]

@srhise BTW. With oneOf new Webpack feature, you should unshift rather than push.
From what I know oneOf works from top to bottom, it tries all loaders, and file-loader is fine with any file and he appears before your sass-loader since you push, so file-loader intercepts your SCSS file and process nothing in a result but directory I think.
Also, don't forget about the production version of the loader since it needs to be handled by ExtractTextPlugin instead.

[timarney]

For the record I deprecated the SASS package when CRA documented this https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc

https://www.npmjs.com/package/react-app-rewire-sass

As noted here https://github.com/timarney/react-app-rewired/issues/23 that might not be the best solution to adding SASS support.

At this point I would suggest if someone want to build out an updated Rewire we can add it to the list here and link out to it. It can be maintained outside of this repo.

https://github.com/timarney/react-app-rewired#community-maintained-rewires

[hwaterke]

For anyone ending up here after a Google search:

const rewired = require('react-app-rewired');

function rewireSass(config) {
  const cssLoader = rewired.getLoader(
    config.module.rules,
    rule => rule.test && String(rule.test) === String(/\.css$/)
  );

  const sassLoader = {
    test: /\.scss$/,
    use: [...(cssLoader.loader || cssLoader.use), 'sass-loader']
  };

  const oneOf = config.module.rules.find(rule => rule.oneOf).oneOf;
  oneOf.unshift(sassLoader);

  return config;
}

I'll make a proper npm package whenever I have time.

Cheers,