# vite-plugin-vue-purifycss

**Repository Path**: deng_qiliang/vite-plugin-vue-purifycss

## Basic Information

- **Project Name**: vite-plugin-vue-purifycss
- **Description**: 支持全局引用的css样式文件（包括css文件和scss文件）按需打包，可以达到最终打包体积减小的效果，避免无用的css样式打进包里；
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2022-12-23
- **Last Updated**: 2025-08-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 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文件