vite-plugin-react-css-modules

A vitejs plugin to use babel-plugin-react-css-modules

getting start

Installation

npm install vite-plugin-react-css-modules

usage

// 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,
    },
  },
});

options

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|

demo

git clone [email protected]:fchengjin/vite-plugin-react-css-module.git
cd vite-plugin-react-css-module/demo
yarn
yarn dev