A css modules optimization plugin for vue
npm install vite-plugin-css-modules-optimize


!> Currently in testing stage, only the use of in VUE SFC files is supported.
> A css modules optimization plugin for vue.
- Deleted unused css code.
- Convert the variables in SFC template to string.
- Compatible with the postcss-modules configuration in vite.config.js(css.modules).
_Unsupported postcss-modules configuration:_
- localsConvention
- globalModulePaths
This plugin need to work before the VUE plugin, it will syntax analysis and conversion of VUE SFC files that use CSS modules by GoGoCode and PostCSS.
``bash`
npm install -D vite-plugin-css-modules-optimize
`javascript
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cssModulesOptimize from 'vite-plugin-css-modules-optimize'
export default defineConfig({
plugins: [cssModulesOptimize(), vue()],
})
`
#### generateScopedNameBase62Global (For VUE)
`javascript
// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cssModulesOptimize, {
generateScopedNameBase62Global,
} from 'vite-plugin-css-modules-optimize'
export default defineConfig({
css: {
modules: {
generateScopedName: generateScopedNameBase62Global,
},
},
plugins: [cssModulesOptimize(), vue()],
})
`
#### generateScopedNameBase62Uniapp (For Uniapp mp-weixin)
由于微信小程序默认样式规则只有当前页面样式会影响到当前页面引用的组件,组件间、父子组件默认是隔离的。
所以采用页面级组件样式增加一个前缀_,其余组件都从 base62 a 开始生成样式名,以达到体积最小化。
`javascript
// vite.config.js
import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import cssModulesOptimize, {
generateScopedNameBase62Uniapp,
} from 'vite-plugin-css-modules-optimize'
export default defineConfig({
css: {
modules: {
generateScopedName: generateScopedNameBase62Uniapp,
},
},
plugins: [cssModulesOptimize(), uni()],
})
`
Source code:
`vue
`
Will be converted to:
`vue
``