在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的命令了。
