vite-plugin-setting-css-module

1.1.4 verified Mon Apr 27 auth: no javascript

A Vite plugin (v1.1.4, last updated 2024) that enables CSS Modules for all CSS/SCSS files without requiring the .module.css naming convention. Primarily designed for migrating legacy React projects to Vite where files are not named with the .module.css pattern. Supports custom include/exclude patterns via regex or function, and per-file opting out with ?global query. Lightweight, TypeScript-compatible, but has minimal documentation and no tests.

Common errors

error Error: The plugin 'vite-plugin-setting-css-module' doesn't have a default export. ↓

cause Using wrong import syntax (e.g., named import or require).

fix

Use: import vitePluginSettingCssModule from 'vite-plugin-setting-css-module'

error TypeError: plugin.apply is not a function ↓

cause Plugin configuration passed incorrectly (e.g., using object syntax instead of function call).

fix

Ensure you call the plugin as a function: plugins: [vitePluginSettingCssModule()]

error WARNING: All CSS files are being treated as CSS Modules by vite-plugin-setting-css-module. ↓

cause Default behavior applies modules to all CSS; likely unintended.

fix

Add the exclude option: exclude: /.*\.global\.css$/

Warnings

gotcha Plugin applies CSS Modules to ALL CSS files by default, including those that were previously global. This may break global styles unexpectedly. ↓

fix Use exclude option to exclude global CSS files, e.g., exclude: /.*\.global\.css$/

gotcha The include option expects a RegExp or function, but the regex must match the full file path. Partial patterns like /\.scss$/ may not match correctly if the path contains modules. ↓

fix Use function for more control: include: (fileName) => fileName.endsWith('.scss')

deprecated The package description and release notes are partially in Chinese; no breaking changes documented. ↓

fix No fix needed, but be aware that support may be limited.

Install

npm install vite-plugin-setting-css-module

yarn add vite-plugin-setting-css-module

pnpm add vite-plugin-setting-css-module

Imports

vitePluginSettingCssModule

wrong

const { vitePluginSettingCssModule } = require('vite-plugin-setting-css-module')

correct

import vitePluginSettingCssModule from 'vite-plugin-setting-css-module'

Default ESM export only; CJS require is not supported.

vitePluginSettingCssModule
```
import vitePluginSettingCssModule from 'vite-plugin-setting-css-module'
```
The plugin is exported as a default export; there are no named exports.

type Options

wrong

import { Options } from 'vite-plugin-setting-css-module'

correct

import type { Options } from 'vite-plugin-setting-css-module'

Options type is only available via type import. Do not import as value at runtime.

Quickstart

Basic setup enabling CSS Modules for all CSS/SCSS files in a Vite + React project.

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import vitePluginSettingCssModule from 'vite-plugin-setting-css-module'

export default defineConfig({
  plugins: [
    react(),
    vitePluginSettingCssModule()
  ]
})