Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zhangfisher/vite-plugin-vue-style-bundler
bundle Vue styles into JavaScript
https://github.com/zhangfisher/vite-plugin-vue-style-bundler
Last synced: about 2 months ago
JSON representation
bundle Vue styles into JavaScript
- Host: GitHub
- URL: https://github.com/zhangfisher/vite-plugin-vue-style-bundler
- Owner: zhangfisher
- License: mit
- Created: 2024-03-18T09:46:32.000Z (6 months ago)
- Default Branch: master
- Last Pushed: 2024-04-01T07:26:38.000Z (6 months ago)
- Last Synced: 2024-07-26T14:42:42.927Z (about 2 months ago)
- Language: TypeScript
- Size: 292 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-vite - vite-plugin-vue-style-bundler - Auto bundle Vue/sfc styles into JavaScript. (Get Started / Templates)
- awesome-vite - vite-plugin-vue-style-bundler - Auto bundle Vue/sfc styles into JavaScript. (Get Started / Templates)
README
# vite-plugin-vue-style-bundler
[中文](./readme_CN.md) | [英文](./readme.md)
When developing `Vue` components, the compiled products consist of `js` and `css`, and both `js` and `css` need to be imported when importing the component.
`vite-plugin-vue-style-bundler` can automatically extract the `css` styles in `Vue` components and bundle them into the `js` source code, and then automatically insert the style into the head at runtime.
After being processed by `vite-plugin-vue-style-bundler`, you only need to import js when importing components.
## Install
```shell
npm install vite-plugin-vue-style-bundler
// or
pnpm add vite-plugin-vue-style-bundler
// or
yarn add vite-plugin-vue-style-bundler
```
## Usage
- **Step 1：Install Plugin**
```ts
// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import StyleBundler from "vite-plugin-vue-style-bundler"
export default defineConfig({
plugins: [
vue(),
StyleBundler({
// lessOptions:{}, if you need to use less, you can configure lessOptions
// sassOptions:{} if you need to use sass/scss, you can configure sassOptions
})
],
})
```
- **第2步：Writing Components**
```vue
Hello, {{ msg }}
.hello {
color: red;
}
```
When the `bundle` attribute is added to the `style` tag of the component, the `vite-plugin-vue-style-bundler` plugin will process the source code of the component.
```diff
Hello, {{ msg }}
+ const $insertStylesheet = (id,css)=>{
+ let style = document.getElementById('ho79thw')
+ if(!style){
+ style = document.createElement("style")
+ style.id = 'ho79thw'
+ document.head.appendChild(style)
+ style.innerHTML = css
+ }
+ }
+ $insertStylesheet(`
+ .hello {
+ color: red;
+ }
+ `)
-
- .hello {
- color: red;
- }
-
```
## Explain
- The plugin automatically injects code into the of the current vue file.
- The styles will be injected into the `style` tag in the document `head`, and the `style.id` is generated based on the path of the current vue file by default. It can also be specified through `<style bundle='styleId'>`.
- If you need to use less or sass, you can add `lessOptions` or `sassOptions` in the plugin configuration.
- By default, the plugin enables the `scoped` mode for `css` in the `<style>` tag, so as to avoid style pollution. If `scoped` mode is not needed, you can set `<style scoped='false'>`.
## Recommendation
- [Internationalization Solution for React/Vue/Nodejs - VoerkaI18n](https://zhangfisher.github.io/voerka-i18n/)
- [React Form Development Library - speedform](https://zhangfisher.github.io/speed-form/)
- [Terminal Interface Development Enhancement Library - Logsets](https://zhangfisher.github.io/logsets/)
- [Log Output Library - VoerkaLogger](https://zhangfisher.github.io/voerkalogger/)
- [Decorator Development - FlexDecorators](https://zhangfisher.github.io/flex-decorators/)
- [Finite State Machine Library - FlexState](https://zhangfisher.github.io/flexstate/)
- [Universal Function Tool Library - FlexTools](https://zhangfisher.github.io/flex-tools/)
- [CSS-IN-JS Library - Styledfc](https://zhangfisher.github.io/styledfc/)
- [VSCode Plugin for Adding Comments to JSON Files - json_comments_extension](https://github.com/zhangfisher/json_comments_extension)
- [Library for Developing Interactive Command Line Programs - mixed-cli](https://github.com/zhangfisher/mixed-cli)
- [Powerful String Interpolation Variable Processing Tool Library - flexvars](https://github.com/zhangfisher/flexvars)
- [Frontend Link Debugging Assistant Tool - yald](https://github.com/zhangfisher/yald)
- [Asynchronous Signal - asyncsignal](https://github.com/zhangfisher/asyncsignal)
- [Vue Tree Component- LiteTree](https://github.com/zhangfisher/lite-tree)
## License
MIT