vite 更好的处理 css module的插件

vite 实现类似webpack oneOf 的Css Module

背景：
一个react的项目，如果使用css module 则需要.module.xx ，这样很不美观，而且繁琐，如果能类似webpack中的oneOf那使用起来就方便灵活了，那如何实现呢？

调研
查看官方文档：https://github.com/vitejs/vite/blob/main/packages/vite/src/node/plugins/css.ts 这个是vite处理css的插件，其实官方内置的是有的，如下代码所示，我们可以看到这个是使用postcss-modules插件来处理的，配置也是一样的

 if (isModule) {
    postcssPlugins.unshift(
      (await import('postcss-modules')).default({
        ...modulesOptions,
        getJSON(
          cssFileName: string,
          _modules: Record<string, string>,
          outputFileName: string
        ) {
          modules = _modules
          if (modulesOptions && typeof modulesOptions.getJSON === 'function') {
            modulesOptions.getJSON(cssFileName, _modules, outputFileName)
          }
        },
        async resolve(id: string) {
          for (const key of getCssResolversKeys(atImportResolvers)) {
            const resolved = await atImportResolvers[key](id)
            if (resolved) {
              return path.resolve(resolved)
            }
          }

          return id
        }
      })
    )
  }

但是vite官方的配置是只能处理.module.xx的文件，这个对于我们全部使用css module 来说是有点不够用的了，那于是我便写了这个插件，来满足项目的需要。

功能：

1. 文件名称不需要增加.module前缀
2. 可以对不通目录下的scss 文件使用不同的css module 配置

解决问题

1. 文件名称更简洁
2. 配置方便，处理css moduel更灵活，可以很好的去覆盖公用组件中的样式
3. 支持打包

使用：

安装

pnpm add -D vite-plugin-filter-css-moudle
pnpm i -D vite-plugin-filter-css-moudle

使用

import vitePluginTransformFilterCssModule from 'vite-plugin-filter-css-moudle';
export default <UserConfig>{
 plugins: [
    vitePluginTransformFilterCssModule([
      {
        test: /src\/components\/([a-z\-] \/)*[a-z\-] \.s[ac]ss$/i,
        modules: {
          generateScopedName: 'prefix_[local]',
        },
      },
      {
        test: /\.s[ac]ss$/i,
        modules: {
          generateScopedName: '[path]___[local]___[hash:base64:5]',
        },
      },
    ])
 ]
}

注意

vitePluginTransformFilterCssModule 数组中按从上到下的顺序优先级处理，css-module的配置请参考postcss-modules 配置

温馨提示：如果能解决您的问题，那很高兴能帮助您，请帮忙点个star支持一下 viteplugin-filter-css-module

这篇好文章是转载于：学新通技术网