@unplugin-vue-ce/sub-style

@unplugin-vue-ce/sub-style

The implementation principle of @unplugin-vue-ce/sub-style comes from vue/core pr #7942

Tips: ⚠ This plugin will inject the implementation code into the vue runtime, which is what I have to tell you. If you have any problems using it, please submit an issue

Snapshot

Install

npm i @unplugin-vue-ce/sub-style

or

yarn add @unplugin-vue-ce/sub-style

or

pnpm add @unplugin-vue-ce/sub-style

Usage

Tips: You need to enable the customElement option of @vitejs/plugin-vue

Vite

// vite.config.ts
import { defineConfig } from 'vite'
import { viteVueCESubStyle } from '@unplugin-vue-ce/sub-style'
import vue from '@vitejs/plugin-vue'
import type { PluginOption } from 'vite'
export default defineConfig({
  plugins: [
    vue(),
    viteVueCESubStyle() as PluginOption,
  ],
})

Rollup

// rollup.config.js
import { rollupVueCESubStyle } from '@unplugin-vue-ce/sub-style'
export default {
  plugins: [
    rollupVueCESubStyle(),
  ],
}

Webpack

// webpack.config.js
module.exports = {
  /* ... */
  plugins: [
    require('@unplugin-vue-ce/sub-style').webpackVueCESubStyle(),
  ],
}

Vue CLI

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('@unplugin-vue-ce/sub-style').webpackVueCESubStyle({}),
    ],
  },
}

ESBuild

// esbuild.config.js
import { build } from 'esbuild'
import { esbuildVueCESubStyle } from '@unplugin-vue-ce/sub-style'

build({
  plugins: [esbuildVueCESubStyle()],
})

About Tailwind CSS

Since vue enables shadow dom by default, it will isolate the style, so you need to add the root component of each web component to add the reference style:

<!-- xxx.vue -->
<style>
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
</style>

or (only vite)

<!-- xxx.vue -->
<script>
  import '@virtual:taiwind'
</script>

About Uno CSS

Only postcss plugins are supported (See: https://unocss.dev/integrations/postcss#install),
you need to add the root component of each web component to add the reference style:

<!-- xxx.vue -->
<style>
    @unocss preflights;
    @unocss default;
    @unocss;
</style>

or (only vite)

<!-- xxx.vue -->
<script>
  import '@virtual:uno'
</script>

About Windi CSS

Windi css is not supported Windi CSS is Sunsetting