Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-app-rewire-css-modules-extensionless with all npm packages installed. Try it out:

var reactAppRewireCssModulesExtensionless = require("react-app-rewire-css-modules-extensionless")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-app-rewire-css-modules-extensionless v1.2.0

Enables CSS modules without any special extension for CRA apps using react-app-rewired

react-app-rewire-css-modules-extensionless

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

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:

NameDescriptionTypeDefault
testThe loader test patternstring/RegExp/\.css$/
includeThe loader include conditionstring/Array/RegExp/Functionsrc folder
excludeThe loader exclude conditionstring/Array/RegExp/Function
localIdentNameThe localIdentName option to pass to the css-loaderstring[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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free