Show docs navigation

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?

Edit this page on Github