react-inline-css-module

Auto transform CSS Module class name for React with Webpack or Vite.

Like babel-plugin-react-css-modules, but more easy to use.

1. Support Webpack and Vite
2. Support import multiple style files

Webpack Configuration

``javascript
module.exports = {
...
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/,
use: [
// options are optional
{ loader: 'react-inline-css-module/dist/webpack-loader', options: { reactVariableName: 'React' } },

// other loaders, eg babel-loader
...
]
}
]
}
...
}
`

Vite Configuration

`javascript
const reactInlineCSSModulePlugin = require('react-inline-css-module/dist/vite-plugin').default

module.exports = {
...
plugins: [
reactInlineCSSModulePlugin({ reactVariableName: 'React' }) // options are optional
]
...
}
`

TypeScript Configuration

`json
{
"compilerOptions": {
"types": ["react-inline-css-module/src/style-name"]
}
}
`

App Code Example

$3

`css
.app {
color: #777;
}

.info {
color: green;
}
`

$3

`js
import './app.module.css'

function App() {
return (