https://github.com/simon-he95/unplugin-inspector-lib-css

将库模式下的unocss样式打包注入到bundle
https://github.com/simon-he95/unplugin-inspector-lib-css

unocss unplugin

Last synced: 10 days ago
JSON representation

将库模式下的unocss样式打包注入到bundle

• Host: GitHub
• URL: https://github.com/simon-he95/unplugin-inspector-lib-css
• Owner: Simon-He95
• License: mit
• Created: 2022-09-19T17:24:32.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2023-12-15T05:42:54.000Z (11 months ago)
• Last Synced: 2024-03-15T08:22:07.662Z (8 months ago)
• Topics: unocss, unplugin
• Language: TypeScript
• Homepage:
• Size: 146 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
## unplugin-inspector-lib-css

将库模式下的unocss样式打包注入到bundle

## Why

在使用tsx写vue组件时，vite build将css注入js中，但unocss并未生产对应转换的css被一起注入,才有了这个库

## Install

```bash

npm i unplugin-inspector-lib-css -D

```

## 🌈 Usage

Vite

```ts

// vite.config.ts

import { vitePlugn as vitePluginTransformToUnocss } from 'unplugin-inspector-lib-css'

export default defineConfig({

  plugins: [vitePluginTransformToUnocss(/* options */)],

})

```




Rollup

```ts

// rollup.config.js

import { resolve } from 'path'

import { vitePlugn as rollupTransformToUnocss } from 'unplugin-inspector-lib-css'

export default {

  plugins: [rollupTransformToUnocss(/* options */)],

}

```




Webpack

```ts

// webpack.config.js

module.exports = {

  /* ... */

  plugins: [

    require('unplugin-inspector-lib-css').webpackPlugin({

      /* options */

    }),

  ],

}

```




Vue CLI

```ts

// vue.config.js

module.exports = {

  configureWebpack: {

    plugins: [

      require('unplugin-inspector-lib-css').webpackPlugin({

        /* options */

      }),

    ],

  },

}

```




Esbuild

```ts

// esbuild.config.js

import { build } from 'esbuild'

import { vitePlugn as esbuilPlugin } from 'unplugin-inspector-lib-css'

build({

  plugins: [esbuilPlugin(/* options */)],

})

```

## Warning

- ts | js | tsx | jsx 文件中头部需要加上// @unocss-include否则不会被注入

## :coffee: 



## :question: 问题

[issues](https://github.com/Simon-He95/unplugin-inspector-lib-css/issues)

## 依赖

`unocss`