Adds CSS modules for CRA apps without requiring the .modules.css extension, using react-app-rewired.
This rewire is similar to react-app-rewire-css-modules with two differences:
- Doesn't require
.modules.cssextension for CSS files insrc/the source folder. - Doesn't force you to install and use the
sass-loader - Setups jest
$ npm install --save-dev react-app-rewire-css-modules-extensionlessIn the config-overrides.js you created for react-app-rewired add this code:
module.exports = { webpack: (config, env) => { config = require('react-app-rewire-css-modules-extensionless').webpack(config, env, { /* options */ }); // The line below is equivalent // config = require('react-app-rewire-css-modules-extensionless')(config, env, { /* options */ }); // You may apply other rewires as well return config; }, jest: (config) => { config = require('react-app-rewire-css-modules-extensionless').jest(config); // You may apply other rewires as well return config; }, };If you are using the compose utility of react-app-rewired:
const { compose } = require('react-app-rewired'); module.exports = { webpack: compose( require('react-app-rewire-css-modules-extensionless').webpack({ /* options */ }) // The line below is equivalent require('react-app-rewire-css-modules-extensionless')({ /* options */ }) // ... other rewires ), jest: compose( require('react-app-rewire-css-modules-extensionless').jest() // ... other rewires ), };Available options:
| Name | Description | Type | Default |
|---|---|---|---|
| test | The loader test pattern | string/RegExp | /\.css$/ |
| include | The loader include condition | string/Array/RegExp/Function | src folder |
| exclude | The loader exclude condition | string/Array/RegExp/Function | |
| localIdentName | The localIdentName option to pass to the css-loader | string | [hash:base64:5]! for production, [name]__[local]___[hash:base64:5]! otherwise |
If you modify include and exclude to point to packages in node_modules, it's advised to use fs.realpathSync so that it plays well with packages linked with npm link. Alternatively, you may disable resolve.symlinks in your webpack configuration.
$ npm test $ npm test -- --watch # during development