A vitejs plugin to use babel-plugin-react-css-modules
npm install vite-plugin-react-css-modules
// vite.config.js
import { defineConfig } from "vite";
import reactRefresh from "@vitejs/plugin-react-refresh";
import reactCssModule from "vite-plugin-react-css-modules";
const generateScopedName = "[name]__[local]___[hash:base64:5]";
export default defineConfig({
plugins: [
reactCssModule({
generateScopedName,
filetypes: {
".less": {
syntax: "postcss-less",
},
},
}),
reactRefresh(),
],
css: {
modules: {
generateScopedName,
},
},
});
you can use all the options exclude webpackHotModuleReloading
of babel-plugin-react-css-modules.
Name | Type | Description | Default |
---|---|---|---|
context |
string |
Must match webpack context configuration. css-loader inherits context values from webpack. Other CSS module implementations might use different context resolution logic. |
process.cwd() |
exclude |
string |
A RegExp that will exclude otherwise included files e.g., to exclude all styles from node_modules exclude: 'node_modules' |
|
filetypes |
?FiletypesConfigurationType |
Configure postcss syntax loaders like sugarss, LESS and SCSS and extra plugins for them. | |
generateScopedName |
?GenerateScopedNameConfigurationType |
Refer to Generating scoped names. If you use this option, make sure it matches the value of localIdentName in webpack config. See this issue |
[path]___[name]__[local]___[hash:base64:5] |
removeImport |
boolean |
Remove the matching style import. This option is used to enable server-side rendering. | false |
handleMissingStyleName |
"throw" , "warn" , "ignore" |
Determines what should be done for undefined CSS modules (using a styleName for which there is no CSS module defined). Setting this option to "ignore" is equivalent to setting errorWhenNotFound: false in react-css-modules. |
"throw" |
attributeNames |
?AttributeNameMapType |
Refer to Custom Attribute Mapping | {"styleName": "className"} |
skip |
boolean |
Whether to apply plugin if no matching attributeNames found in the file |
false |
autoResolveMultipleImports |
boolean |
Allow multiple anonymous imports if styleName is only in one of them. |
false |
git clone git@github.com:fchengjin/vite-plugin-react-css-module.git
cd vite-plugin-react-css-module/demo
yarn
yarn dev