2022年12月8日
用Stylify CSS更快编写你的Laravel网站代码
用Stylify的类似于CSS的工具更快地编写你的Laravel网站。不要研究CSS框架。专注于编码。
简介
Stylify是一个库，它使用类似于CSS的选择器，根据你写的内容生成优化的实用优先的CSS。
- ✅ 类似CSS的选择器
- ✅ 不需要研究框架
- ✅ 花在文档上的时间更少
- ✅ 纠结&极小的CSS
- ✅ 不需要清除CSS
- ✅ 组件、变量、自定义选择器
- ✅ 它可以生成多个CSS捆绑包
我们也有一个关于Stylify CSS解决了什么问题，以及为什么你应该尝试一下！
安装
本文使用Laravel和Vite。对于带有Webpack的旧版本，请查看[本指南](/zh/docs/integrations/laravel#for-older-vesions of-laravel-with-webpack)。
使用CLI安装Stylify：
npm i -D @stylify/unplugin
yarn add -D @stylify/unplugin在vite.config.js中添加以下配置：
import { defineConfig } from 'vite';
import { stylifyVite } from '@stylify/unplugin';
const stylifyPlugin = stylifyVite({
// 你可以定义多个bundles，本例为简单起见只用了一个
bundles: [{ files: ['resources/views/**/*.blade.php'], outputFile: 'resources/css/stylify.css' }],
// 可选的 - https://stylifycss.com/en/docs/unplugin
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: {},
// ...
}
});
export default defineConfig(() => ({
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>如果你在stylifyVite插件中定义了一个以上的bundle，请确保在正确的页面上导入生成的CSS文件。
使用方法
Stylify的语法与CSS相似。你只需要写_而不是空格，^而不是引号。
因此，如果我们编辑resources/views/welcome.blade.php：
<div class="text-align:center font-size:48px color:blue">Stylify + Laravel = 🚀</div>在生产中, 你会得到优化的CSS和纠结的HTML：
<div class="a b c">Stylify + Laravel = 🚀</div>.a{text-align:center}
.b{font-size:48px}
.c{color:blue}整合实例
你也可以在Github上查看我们的Laravel集成示例。
配置
上面的例子并不包括Stylify能做的一切：
请随时查看文档以了解更多信息 💎。
