0.0.10 • Published 3 years ago
vite-plugin-style-modules v0.0.10
vite-plugin-style-modules
版本
Vite2.7.4 及以上
安装
npm install vite-plugin-style-modules
demo
vite.config.js
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 文件
:global {
#root {
margin: 0;
padding: 0;
}
h1 {
color: #0af;
font-style: italic;
}
.child {
border: 1px solid;
}
}
.wrapper {
color: #0af;
.title {
font-size: 16px;
}
}
组件
import ReactDOM from 'react-dom';
import styles from './index.less';
console.log('styles', styles);
ReactDOM.render(
<div className={styles.wrapper}>
<h1 className='child'>123</h1>
</div>,
document.querySelector('#root')
);
API
vite-plugin-style-modules
允许接受一个对象作为参数,详情如下:
Name | Type | Description | 默认 |
---|---|---|---|
path | RegExp | 需要模块化处理的文件名正则表达式,比如/\.css/ | /\.(css\|less\|scss\|stylus\|styl)/ |
postcss-modules接收的参数 | postcss-modules | 参数将直接透传到 postcss-modules | undefined |
其他
1、预处理语言
支持less
、sass
、stylus
2、支持@import url
3、Of course, 支持热更新
一个合格的 vite 插件应该都会具有哈