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/bundler package using NPM or Yarn:

npm i -D @stylify/bundler

yarn add -D @stylify/bundler

Next add the following configuration into the vite.config.js:

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { nativePreset } from '@stylify/stylify';
import { Bundler } from '@stylify/bundler';

export default defineConfig(({ mode}) => {
  // Optional configuration.
  nativePreset.compiler.variables = {
    blue: 'steelblue'

  // Create a new Bundler instance.
  const bundler = new Bundler({
    compiler: nativePreset.compiler,
    watchFiles: mode === 'development'

  // You can customize bundles however you want.
  const bundle = async () => {
        files: ['./src/**/*.vue'],
        outputFile: './src/assets/stylify.css'
    return bundler.waitOnBundlesProcessed();

  const stylifyBundlerPlugin = () => {
    return {
      name: 'stylify',
      options: bundle

  // Use the Stylify plugin.
  return {
    plugins: [vue(), stylifyBundlerPlugin()]

Now you can add the path to the generated stylify.css into src/main.js file:

import { createApp } from 'vue'
import App from './App.vue'
import './assets/stylify.css';


If you use the Vite.js commands now you will get the stylify.css file generated.


The example above uses the @stylify/bundler package and the configuration can be found inside that package documentation. For the Compiler config, checkout the Compiler documentation.