craco-css-modules
v1.0.6
Published
A craco plugin to automatically use css modules
Downloads
1,213
Maintainers
Readme
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:
^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
:
$ 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.