Vite.js integration
Stylify can be integrated into the Vite.js using @stylify/bundler.
Edit on StackBlitz
Integration example for the Vite.js can be found in
integrations examples repository
.
How to integrate the Stylify into the Vite.js
The example bellow works with the Vite - Vue.js template. You can however use the example bellow and configure it for Svelte, React and any other framework you use.
First install the @stylify/unplugin package using NPM or Yarn:
npm i -D @stylify/unplugin
yarn add -D @stylify/unplugin
Next add the following configuration into the vite.config.js
:
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { vitePlugin } from '@stylify/unplugin';
const stylifyPlugin = vitePlugin({
transformIncludeFilter: (id) => id.endsWith('vue'),
bundles: [{
files: ['./src/**/*.vue'],
outputFile: './src/assets/stylify.css'
}]
});
export default defineConfig(({ mode}) => {
return {
plugins: [stylifyPlugin, vue()]
}
});
Now you can add the path of the generated stylify.css
into src/main.js
file:
import { createApp } from 'vue'
import App from './App.vue'
import './assets/stylify.css';
createApp(App).mount('#app')
If you use the Vite.js commands now you will get the stylify.css
file generated.
Where to go next?
- 🚀 Learn how to get started
- 🔌 Checkout @stylify/unplugin configuration
- ⚙️ Or configure Stylify right away: