vite-plugin-css-generator

css file generator only write class name


Keywords
css, vue, react, vite-plugin
License
MIT
Install
npm install vite-plugin-css-generator@2.5.5

Documentation

css-generator-plugin 自动生成css文件,高效开发页面

在线尝试

更新记录

如何使用

  • 安装依赖

    webpack 小程序用户

    npm i css-generator-plugin -D
      or
    yarn add css-generator-plugin -D

    webpack配置

    const CssGeneratorPlugin = require('css-generator-plugin')
    {
      // ... other config settings 
      plugins: [
        new CssGeneratorPlugin()
      ]
    };

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

    import '@/style/auto.css'

    vite 用户

    npm i vite-plugin-css-generator -D
      or
    yarn add vite-plugin-css-generator -D

    vite 配置

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

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

    import '@/style/auto.css'

    生成器 用户

    npm i css-generator-script
      or
    yarn add css-generator-script

    项目入口中引用

    // Gcss(<配置项>) 写入配置项
    import Gcss from 'css-generator-script'
    new Gcss({}).start()

    CDN 引入

    <html>
    <head>
      <script src="https://cdn.jsdelivr.net/npm/css-generator-script/gcss.js"></script>
    </head>
    <body>
    </body>
    <script>
      // {} is config
      new window.Gcss({}).start()
    </script>
    </html>

生成代码提示文件

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

npx gen-snippets
 or
yarn gen-snippets

配置项

webpack 或 vite 用户请 下载本项目中配置文件 .css.generator.js 到项目根目录

cdn 或生成器用户 请在 函数中传入配置


### 命令行启动(如小程序类和老项目,无webpack)
+ 运行指令
```text
npx css-generator
  or
yarn css-generator

规则说明与进阶使用