Using Stylify CSS with Vite.js

Vite.js is next Generation Frontend Tooling and Assets Bundler.

Stylify can be integrated into the Vite.js using @stylify/bundler.

Try it on StackBlitz

How to integrate the Stylify CSS into the Vite.js

The example bellow works with the Vite template. You can however use the example bellow and configure it for Svelte, React, Vue, Angular, Lit and any other framework you want.

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 { stylifyVite } from '@stylify/unplugin';

const stylifyPlugin = stylifyVite({
  bundles: [{ files: ['./*'], outputFile: './stylify.css' }],
  // Optional - https://stylifycss.com/docs/unplugin
  compiler: {},
});

export default defineConfig(({ mode }) => ({
  plugins: [stylifyPlugin],
}));

Now you can add the path of the generated stylify.css into main.js file:

import './stylify.css';

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