1.2.0 • Published 6 years ago
react-app-rewire-css-modules-extensionless v1.2.0
react-app-rewire-css-modules-extensionless
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.css
extension for CSS files insrc/
the source folder. - Doesn't force you to install and use the
sass-loader
- Setups jest
Installation
$ npm install --save-dev react-app-rewire-css-modules-extensionless
Usage
In 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.
Tests
$ npm test
$ npm test -- --watch # during development