# vite-plugin-autocss

**Repository Path**: bad_-code/vite-plugin-autocss

## Basic Information

- **Project Name**: vite-plugin-autocss
- **Description**: 基于vite的HMR API实现的根据页面class自动生成css的vite插件
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-09-12
- **Last Updated**: 2023-08-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## vite-plugin-autocss 基于vite的HMR机制，根据页面class自动生成css文件

## [更新记录](https://gitee.com/bad_-code/vite-plugin-autocss/blob/master/CHANGE.md)
### 如何使用
+
  ### 安装依赖
  ```shell
  pnpm add vite-plugin-autocss-generator -D
    or
  npm i vite-plugin-autocss-generator -D
    or
  yarn add vite-plugin-autocss-generator -D
  ```
+
    ### vite 配置
  ```js
  import vitePluginAutocss from 'vite-plugin-autocss-generator'
  export default defineConfig({
    // ... other config settings 
    plugins:[
      vitePluginAutocss()
    ]
  })
  ```
  在项目入口文件中引入 生成的css 
  ```js
  import '@/style/auto.css'
  ```
***
 ### 生成代码提示文件
  将会在项目根目录生成 autocss-use-snippets.css 作为代码提示文件
  ```
  npx autocss-gen-snippets
   or
  yarn autocss-gen-snippets
  ```

### 配置项
请复制项目根目录中 `node_modules/vite-plugin-autocss-generator/` 目录下的配置文件 **[autocss.config.js](https://gitee.com/bad_-code/vite-plugin-autocss/blob/master/autocss.config.js)** 到项目根目录，重命名为 `.autocss.config.js` 文件

### 自动生成配置文件【可省略手动复制配置文件的步骤】
  将会在项目根目录生成 .autocss.config.js 配置文件
  ```
  npx autocss-init-config
    or
  yarn autocss-init-config
  ```


## [规则说明与进阶使用](https://gitee.com/bad_-code/vite-plugin-autocss/blob/master/RULE.md)

### 感谢以下开源仓库提供

+ ## [css-generator-plugin](https://github.com/macheteHot/css-generator-plugin)