vite-plugin-vue-purifycss

vite-plugin-vue-purifycss

CSS-purifycss

Install

首先必须先下载的依赖包:(vite-plugin-vue-purifycss引用了autoprefixer、postcss、precss这三个依赖包)
npm install autoprefixer -D
npm install postcss -D
npm install precss -D

下载vite-plugin-vue-purifycss的方式:
npm install vite-plugin-vue-purifycss -D
# or
yarn add  vite-plugin-vue-purifycss -D
# or
cnpm install vite-plugin-vue-purifycss -D
# or
pnpm install vite-plugin-vue-purifycss -D

Usage1:按需打包全局引入的css或scss或less样式文件(可自动按需打包vue文件中的style标签下已使用样式)

vite.config.ts/vite.config.js
import vitePluginPurifycss from "vite-plugin-vue-purifycss"
export default defineConfig({
  plugins: [
    vue(),
    vitePluginPurifycss({
      cssList: ["xxxxx.css","xxxxx.scss","xxxxx.less",....],
    }),
]})
main.js/main.ts
import "xxxxxxxxx.css";
或者
import "xxxxxxxxx.scss";
或者
import "xxxxxxxxx.less";

Usage2:只要自动按需打包vue文件中的style标签下已使用样式的功能

vite.config.ts/vite.config.js
import vitePluginPurifycss from "vite-plugin-vue-purifycss"
export default defineConfig({
  plugins: [
    vue(),
    vitePluginPurifycss(),
]})

Description

1.可自动按需打包vue文件中的style标签下已使用的样式(强烈提议每个vue文件的style标签添加scoped属性)

2.如果想按需打包全局引入的css或scss或less样式文件,cssList必须输入按需打包对应的css或scss或less样式文件名(前提是该样式文件必须在mian.js/main.ts已经引入,按需打包才会生效)

3.如果只要自动按需打包vue文件中的style标签下已使用样式的功能,则使用插件无需填入参数亦可

4.默认扫描全局的vue文件