Using Stylify CSS in Laravel Framework

Shortcuts:How to integrate the Stylify CSS into the Laravel Framework For older vesions of Laravel with Webpack

Laravel is a PHP web application framework with expressive, elegant syntax.

Stylify can be integrated into the Laravel using the Stylify CSS Vite plugin.

Integration example for the Laravel framework can be found in integrations examples repository.

How to integrate the Stylify CSS into the Laravel Framework

npm i -D @stylify/unplugin
yarn add -D @stylify/unplugin

Open the vite.config.js and add the Stylify CSS Plugin:

import { defineConfig } from 'vite';
import { stylifyVite } from '@stylify/unplugin';

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

export default defineConfig(({ mode }) => ({
	plugins: [
		stylifyPlugin,
		laravel({
			// Add path to generated files
			input: ['resources/js/app.js', 'resources/css/stylify.css'],
			refresh: true,
		}),
	],
}));

Add the path to resources/css/stylify.css into the template:

<head>
	@vite('resources/css/stylify.css')
</head>

Now when you run dev command in package.json, the CSS will be generated. When you run build, the CSS will also be mangled.

For older vesions of Laravel with Webpack

First, install the @stylify/unplugin package using NPM or Yarn:

npm i -D @stylify/unplugin
yarn add -D @stylify/unplugin

Next add Stylify CSS plugin into the webpack.mix.js:

const { stylifyWebpack } = require('@stylify/unplugin');

const stylifyPlugin = stylifyWebpack({
	bundles: [{
		outputFile: './resources/css/homepage.css',
		files: ['./resources/views/welcome.blade.php']
	}],
	// Optional
	// Compiler config info https://stylifycss.com/en/docs/stylify/compiler#configuration
	compiler: {
		// https://stylifycss.com/en/docs/stylify/compiler#variables
		variables: {},
		// https://stylifycss.com/en/docs/stylify/compiler#macros
		macros: {},
		// https://stylifycss.com/en/docs/stylify/compiler#components
		components: {},
		// ...
	}
});

mix.webpackConfig({
	mode: 'development',
	plugins: [stylifyPlugin]
});

Now you can use the commands for laravel mix.

Where to go next?

🚀 Learn how to get started
🔌 Check out @stylify/unplugin configuration
⚙️ Or configure Stylify right away: