vite-plugin-css-generator

    2.5.5 • Public • Published

    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
    
    

    规则说明与进阶使用

    Install

    npm i vite-plugin-css-generator

    DownloadsWeekly Downloads

    20

    Version

    2.5.5

    License

    MIT

    Unpacked Size

    47.9 kB

    Total Files

    6

    Last publish

    Collaborators

    • machete-jhun