Registry / web-framework / vite-plugin-setting-css-module

vite-plugin-setting-css-module

library1.1.4jsnpmunverified

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.

web-framework

npm install vite-plugin-setting-css-module

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-SETTIN

vite-plugin-setting-css-module

web-frameworkjavascriptv1.1.4

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

vitePluginSettingCssModule

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

✗ const { vitePluginSettingCssModule } = require('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

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

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

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

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() ] })

Debug

Known issues

gotchaPlugin 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$/

affects: >=1.0.0

gotchaThe 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')

affects: >=1.0.0

deprecatedThe 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.

affects: >=1.0.0

Errors

Common errors & fixes

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

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

fix

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

TypeError: plugin.apply is not a function

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

fix

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

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

Default behavior applies modules to all CSS; likely unintended.

fix

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

Upgrade

Version history

1.1.4latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

9 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/ProgrameBoy/vite-plugin-setting-css-module ↗

packagehttps://www.npmjs.com/package/vite-plugin-setting-css-module ↗