Skip to content
Enables CSS modules without any special extension for CRA apps using react-app-rewired
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib feat: allow css file pattern customisation (#5) Aug 26, 2018
test test: add tests or the test option Aug 29, 2018
.editorconfig feat: initial commit Jul 18, 2018
.eslintignore feat: initial commit Jul 18, 2018
.eslintrc.json chore: update deps Aug 7, 2018
.gitignore
.travis.yml feat: initial commit Jul 18, 2018
CHANGELOG.md
LICENSE feat: initial commit Jul 18, 2018
README.md chore: use https in some links Nov 24, 2019
index.js feat: add support for jest Jul 19, 2018
package-lock.json chore(deps): bump js-yaml from 3.12.0 to 3.13.1 (#11) Oct 23, 2019
package.json chore: change postrelease script to push to current branch Jan 3, 2020

README.md

react-app-rewire-css-modules-extensionless

NPM version Downloads Build Status Coverage Status Dependency status Dev Dependency status

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 in src/ 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

License

MIT License

You can’t perform that action at this time.