noop(); pop(); map();

    react-app-rewire-css-modules-extensionless

    1.2.0 • Public • Published

    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:

    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

    Install

    npm i react-app-rewire-css-modules-extensionless

    DownloadsWeekly Downloads

    40

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    12.3 kB

    Total Files

    7

    Last publish

    Collaborators

    • satazor