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

如果想去除项目中没用到的css可以删除根目录引入的css源文件，然后重新编译项目即可生成新的css。

更新记录

如何使用

• 安装依赖【推荐pnpm作为包管理器】

  pnpm add vite-plugin-autocss -D
    or
  npm i vite-plugin-autocss -D
    or
  yarn add vite-plugin-autocss -D

• vite 配置

  import vitePluginAutocss from 'vite-plugin-autocss'
  export default defineConfig({
    // ... other config settings 
    plugins:[
      vitePluginAutocss()
    ]
  })

  在项目入口文件中引入 生成的css

  import '@/style/auto.css'

生成代码提示文件

• npx脚本生成【不支持读取css前缀】

  将会在项目根目录生成 autocss-use-snippets.css 作为代码提示文件

  npx autocss-gen-snippets
  or
  yarn autocss-gen-snippets

• 配置文件配置自动生成【支持读取css前缀】

  // .autocss.config.js
  module.exports = {
    // 省略的配置内容
    ...,
    autoUseSnippets: true, // 是否自动生成css代码提示文件
    // 省略的配置内容
    ...
  }

配置项

请复制项目根目录中 node_modules/vite-plugin-autocss/ 目录下的配置文件 autocss.config.js 到项目根目录，重命名为 .autocss.config.js 文件

自动生成配置文件【可省略手动复制配置文件的步骤】

将会在项目根目录生成 .autocss.config.js 配置文件

npx autocss-init-config
  or
yarn autocss-init-config

规则说明与进阶使用

感谢以下开源仓库提供

• css-generator-plugin