vite-plugin-vue-hoist-ce-styles
v0.1.3
Published
A vite/vue plugin to circumvent a bug on Vue3
Downloads
908
Readme
Vite-Plugin-Vue-Hoist-Ce-Styles
Caveats
- CSS imports outside of SFCs won't work. E.g. the default
import 'styles.css'
in main.ts will work in dev but break the build. - Plugin check bundle name
index.%%ANYTHING%%.js
by default to replace styles in the final bundle - Plugin has no unit tests right now, and is largely untested, use with caution
Installation
Run
npm i -D vite-plugin-vue-hoist-ce-styles
or
yarn add --dev vite-plugin-vue-hoist-ce-styles
Usage
In your vite.config.(js|ts)
import the plugin and register it.
Also make sure that customElement: true
is passed to the vue plugin
import { hoistCeStyles } from 'vite-plugin-vue-hoist-ce-styles';
plugins: [vue({ customElement: true }), hoistCeStyles({hostComponent: 'App.vue'})],
You can define a parameter indexRe to define your entry file name as a RegExp
import { hoistCeStyles } from 'vite-plugin-vue-hoist-ce-styles';
plugins: [vue({ customElement: true }), hoistCeStyles({ hostComponent: 'App.vue', indexRe: /entry-file.js/ })],