Skip to content

Instantly share code, notes, and snippets.

@xiaoxiangmoe
Created November 5, 2017 10:27
Show Gist options
  • Save xiaoxiangmoe/63eeadb124852890ba4f548fd0f8bd7b to your computer and use it in GitHub Desktop.
Save xiaoxiangmoe/63eeadb124852890ba4f548fd0f8bd7b to your computer and use it in GitHub Desktop.
react-app-rewired with css-modules and scss
/* 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;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment