⭐️⭐️⭐️ Support CSS Modules, not only in xx.module.xx, but also in the custom named file. like xx.(css|less|sass|stylus)
npm install vite-plugin-style-modulesVite2.7.4 及以上
``javascript`
npm install vite-plugin-style-modules
vite.config.js
`javascript
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import viteCssModule from 'vite-plugin-style-modules';
// 支持ESM和CommonJS两种方式引入
// const viteCssModule = require('vite-plugin-style-modules')
export default defineConfig({
plugins: [react(), viteCssModule()],
});
`
LESS 文件
`css
:global {
#root {
margin: 0;
padding: 0;
}
h1 {
color: #0af;
font-style: italic;
}
.child {
border: 1px solid;
}
}
.wrapper {
color: #0af;
.title {
font-size: 16px;
}
}
`
组件
`jsx
import ReactDOM from 'react-dom';
import styles from './index.less';
console.log('styles', styles);
ReactDOM.render(
API
vite-plugin-style-modules允许接受一个对象作为参数,详情如下:| Name | Type | Description | 默认 |
| ----------------------------- | --------------------------------------------------------------- | ----------------------------------------------- | ------------------------------------- |
| path | RegExp | 需要模块化处理的文件名正则表达式,比如
/\.css/ | /\.(css\|less\|scss\|stylus\|styl)/ |
| postcss-modules接收的参数 | postcss-modules | 参数将直接透传到 postcss-modules | undefined |$3
#### 1、预处理语言
支持
less、sass、stylus#### 2、支持
@import url`#### 3、Of course, 支持热更新
一个合格的 vite 插件应该都会具有哈