将 .less 等普通 css 转换为 css module
vite@2.7.2 测试过
// vite.config.ts
export default {
plugins: [normalCSSToModule()],
}
一般不需要,会与 :global 语法冲突,如果确定 非 module 的 css 文件中 没有使用 :global 语法,可以用来排除 非 module 的文件
normalCSSToModule({
/**
* 如果有 非css module(直接 import 引入) 的文件,添加到 exclude 中
* e.g. App.tsx
* import '@/reset.less';
*/
exclude: [path.resolve(__dirname, './reset.less')],
})
微前端中,给每个子应用添加前缀类名,一般为 项目名, e.g. .classA
-> .pkgName .classA
import prefixer from 'postcss-prefix-selector'
import pkg from './package.json'
postcss: {
plugins: [
prefixer({
/**
* 添加 css 类名前缀,一般为 mount 的根节点类名
*/
// 加 :global 给 css module 处理
prefix: `:global(.${pkg.name})`,
// 忽略全局的样式
// 比如项目中所有文件都是 `.less` 并且 全局的一些样式(非 CSSModule 的 重置样式,变量文件,主题文件等,都是用 :global 包裹,在 应用的入口文件中引入),这些样式最终编译后 为 正常的类名,不带任何 CSSModule 的特征
ignoreFiles: ['reset', 'variable'].map((o) =>
path.resolve(__dirname, `./src/${o}.less`)
),
transform: function (prefix, selector, prefixedSelector, filepath) {
// node_modules 中的 css module 不会处理,不加 :global
if (filepath.match(/node_modules/)) {
return `.${pkg.name} ${selector}`
}
return prefixedSelector
},
}),
],
}