在Laravel框架中使用Stylify CSS

Laravel是一个具有表现力的、优雅的语法的PHP Web应用程序框架。

Stylify可以通过Stylify CSS Vite插件集成到Laravel中。

Laravel框架的集成实例可以在集成实例库中找到。

如何将Stylify的CSS集成到Laravel框架中

首先安装Stylify unplugin

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

打开vite.config.js,添加Stylify CSS插件:

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

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

export default defineConfig(({ mode }) => ({
	plugins: [
		stylifyPlugin,
		laravel({
			// 添加生成文件的路径
			input: ['resources/js/app.js', 'resources/css/stylify.css'],
			refresh: true,
		}),
	],
}));

在模板中添加resources/css/stylify.css的路径:

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

现在当你在package.json中运行dev命令时,CSS将被生成。当你运行build时,CSS也会被修改。

对于带有Webpack的Laravel的旧版本

首先, 使用NPM或Yarn安装@stylify/unplugin软件包:

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

接下来将Stylify CSS插件添加到webpack.mix.js中:

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

const stylifyPlugin = stylifyWebpack({
	bundles: [{
		outputFile: './resources/css/homepage.css',
		files: ['./resources/views/welcome.blade.php']
	}],
	// 可选
	// 编译器配置信息 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]
});

现在你可以使用laravel mix的命令了。

下一步该去哪里