https://github.com/crazyurus/craco-css-modules
A craco plugin to automatically use css modules
https://github.com/crazyurus/craco-css-modules
craco create-react-app css-modules
Last synced: 9 months ago
JSON representation
A craco plugin to automatically use css modules
- Host: GitHub
- URL: https://github.com/crazyurus/craco-css-modules
- Owner: crazyurus
- License: mit
- Created: 2022-01-26T07:17:52.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2024-09-13T08:56:13.000Z (over 1 year ago)
- Last Synced: 2025-05-02T23:46:06.475Z (9 months ago)
- Topics: craco, create-react-app, css-modules
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/craco-css-modules
- Size: 234 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Craco CSS Modules Plugin
[](LICENSE)
[](https://www.npmjs.com/package/craco-css-modules)
[](https://www.npmjs.com/package/craco-css-modules?activeTab=dependents)
[](https://www.npmjs.com/package/craco-css-modules)
This is a [craco](https://craco.js.org) plugin that adds CSS Modules support to [create-react-app](https://facebook.github.io/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](https://github.com/dilanx/craco/blob/master/packages/craco/README.md) 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](https://github.com/crazyurus/create-react-app). You can directly use this template.
## License
[MIT](./LICENSE)