vite-plugin-vue-purifycss

CSS-purifycss

Install

``shell
首先必须先下载的依赖包:(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标签下已使用样式)

`ts
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标签下已使用样式的功能

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

Description

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

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

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

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