Craco CSS Modules Plugin

This is a craco plugin that adds CSS Modules support to create-react-app.

Introduction

When you use craco-css-modules, you no longer need to add the module suffix to css less or scss file names. For example:

// Before
import styles from './index.module.scss';

// After
import styles from './index.scss';

We judge whether we should use CSS Modules based on how the less file is imported.

// use CSS Modules
import styles from './index.scss';

// do not use CSS Modules
import './index.scss';

Supported Versions

craco-css-modules is tested with:

react-scripts: ^5.0.0
@craco/craco: 6.4.0 and above, 7.0.0

And you can also use with follow plugins:

craco-less: ^2.0.0

Installation

First, follow the craco Installation Instructions to install the craco package, create a craco.config.js file, and modify the scripts in your package.json.

Then install craco-css-modules:

$ npm install --dev craco-css-modules

# OR

$ yarn add --dev craco-css-modules

# OR

$ pnpm install --dev craco-css-modules

Usage

Here is a complete craco.config.js configuration file that adds CSS Modules rule to create-react-app:

const CracoCSSModules = require('craco-css-modules');

module.exports = {
  plugins: [
    { plugin: CracoCSSModules }
  ],
};

If you are using less, you can also use the plugin craco-less:

const CracoLess = require('craco-less');
const CracoCSSModules = require('craco-css-modules');

module.exports = {
  plugins: [
    { plugin: CracoLess },
    { plugin: CracoCSSModules }
  ],
};

Example

Here is a complete example create-react-app-with-craco. You can directly use this template.

License

MIT