Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
craco-css-modules
Advanced tools
This is a craco plugin that adds CSS Modules support to create-react-app.
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';
craco-css-modules
is tested with:
^5.0.0
6.4.0
and above, 7.0.0
And you can also use with follow plugins:
^2.0.0
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
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 }
],
};
Here is a complete example create-react-app-with-craco. You can directly use this template.
FAQs
A craco plugin to automatically use css modules
The npm package craco-css-modules receives a total of 280 weekly downloads. As such, craco-css-modules popularity was classified as not popular.
We found that craco-css-modules demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.