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 来说是有点不够用的了,那于是我便写了这个插件,来满足项目的需要。
功能:
- 文件名称不需要增加.module前缀
- 可以对不通目录下的scss 文件使用不同的css module 配置
解决问题
- 文件名称更简洁
- 配置方便,处理css moduel更灵活,可以很好的去覆盖公用组件中的样式
- 支持打包
使用:
安装
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