react-app-rewired with css-modules and scss

config-overrides.js

/* config-overrides.js */


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

function contailCSSLoader(obj) {
  const reg = /css-loader/;
  if (typeof obj === 'string') {
    return reg.test(obj);
  }
  return reg.test(obj.loader);
}
function rewireCss(config) {
  const cssLoader = rewired.getLoader(
    config.module.rules,
    rule => rule.test && String(rule.test) === String(/\.css$/)
  );
  const cssLoaderLoader = cssLoader.use.find(contailCSSLoader);
  const options = cssLoaderLoader.options;
  options.modules = true;
  console.log(cssLoaderLoader.options);
  // const oneOf = config.module.rules.find(rule => rule.oneOf).oneOf;
  // oneOf.unshift(sassLoader);

  return config;
}

function rewireSass(config) {
  const cssLoader = rewired.getLoader(
    config.module.rules,
    rule => rule.test && String(rule.test) === String(/\.css$/)
  );
  const sassLoader = {
    test: /\.scss$/,
    use: [...cssLoader.use, 'sass-loader'],
  };

  const cssLoaderLoader = sassLoader.use.find(contailCSSLoader);
  const options = cssLoaderLoader.options;
  options.importLoaders = 2;

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

module.exports = function override(config, env) {
  config = rewireCss(config, env);
  config = rewireSass(config, env);
  return config;
};