Craco CSS Modules Plugin

!test
!publish

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:
``js
// 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.

`js
// 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: ^3.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:

`bash
$ 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:

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

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

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

`js
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