无论是微服务还是大型的项目，样式多了就容易被覆盖，目前css-in-js，scoped等都可以来实现，当然我比较喜欢使用CSS-Module，主要可以自由的定制class名称，也可以很好的去做区分，Vite其实也提供了CssModule，也可以根据不同的文件来自定义名称，但抛弃不掉的是.module.scss, 下面就说一下类似webpack中oneOf功能的Vite CssModule 插件,可以针对不同的正则来使用不同的CSS Module规则。

这个使用了postcss-modules,不清楚的可以进去看看github.com/madyankin/p…

安装

当然也可以使用yarn cnpm ，npm 都可以安装 js复制代码pnpm add -D vite-plugin-oneof-css-module

使用

在vite配置文件中,如下进行配置

import { defineConfig } from 'vite';
import VitePluginOneofCssModule from 'vite-plugin-oneof-css-module';
export default defineConfig({
    plugins: [
        VitePluginOneofCssModule({
            modules: [
                {
                    test: /\.scss$/,
                    generateScopedName: 'k-[local]'
                }
            ]
        })
    ]
});

功能一

比如我想在项目中使用index.scss 文件 index.scss 文件中

.box{
width:100px;
height:200px;
border:1px solid red;

}

index.tsx 文件中

import $style from "./index.scss"

<div className={$style.box}></div>

转换后的结果就是

.k-box{
    width:100px;
    height:200px;
    border:1px solid red;
    }

功能二

开启devsourcemap则转换后的class可以定位到具体的,默认false，如果在开发环境开启devsourcemap:true则转换后的class可以定位到具体的css位置，如果设置成false，则在style标签

1
2export default defineConfig({
3    css:{
4        devSourcemap:true
5    }
6    plugins: [
7        VitePluginOneofCssModule({
8            modules: [
9                {
10                    test: /\.scss$/,
11                    generateScopedName: "k-[local]"
12                }
13            ]
14        })
15    ]
16});

功能三

可以针对不同的文件进行处理，比如说按如下配置

1export default defineConfig({
2    plugins: [
3        VitePluginOneofCssModule({
4            modules: [
5                {
6                    test: /index\.scss$/,
7                    generateScopedName: 'k-[local]'
8                },
9                {
10                    test: /app\.scss$/,
11                    generateScopedName: 'v-[local]'
12                }
13            ]
14        })
15    ]
16});

app.scss文件

.body{
    color:green;
}

app.tsx 文件

1import $style from './app.scss';
2
3<div className={$style.body}>我是另一个scss文件</div>;

转换后结果为： app.scss

.v-body{
    color:green;
}

index.scss

.k-box{
    width:100px;
    height:200px;
    border:1px solid red;
}

功能四

可以使用additionalData 全局注入scss 变量，比如如下

1export default defineConfig({
2      plugins: [
3        VitePluginOneofCssModule({
4            additionalData 全局注入: "$color:red;",
5            modules: [
6                {
7                    test: /index\.scss$/,
8                    generateScopedName: "k-[local]"
9                },
10                {
11                    test: /app\.scss$/,
12                    generateScopedName: "v-[local]"
13                }
14            ]
15        })
16      ]
17});

在任何scss文件中可以直接使用$color 变量 css复制代码color:$color;

功能案例五

当然也可以添加postcss plugins 插件 ，可以使用postcssPlugin插件，这里就简单举个例子 比如使用postcss-preset-env 这个postcss 插件

1import postcssPresetEnv from 'postcss-preset-env';
2export default defineConfig({
3    plugins: [
4        VitePluginOneofCssModule({
5            postcssPlugin: [postcssPresetEnv()]
6        })
7    ]
8});

如下:

user-select: none;

将被转换为

-webkit-user-select: none;
-moz-user-select: none;
user-select: none;

混合使用 当然，你如果在VitePluginOneofCssModule不去匹配这个文件，那该文件是被Vite内置的插件处理的，如下可以混合处理的

1import $style from './App.scss';
2import './index.scss';
3function App() {
4    return (
5        <div className={$style.app}>
6            我是APP
7            <div className='header'></div>
8            <div className={$style.body}>我是body</div>
9        </div>
10    );
11}
12export default App;

作者：LVZ 链接：https://juejin.cn/post/7304946588752478271 具体用法可在掘金中查看