用Stylify CSS更快地编码您的SolidJS网站

用Stylify CSS更快地编写您的SolidJS网站代码

50% discount on .EU, .ONLINE, .STORE, .TECH, .SITE, .WEBSITE, .SPACE, .FUN domains.
Code DM241ERDTF

使用 Stylify CSS 类似于 CSS 的工具，在没有 CSS-in-JS 的情况下，快速而轻松地为您的 SolidJS 应用程序设计样式。

介绍

Stylify 是一个库，它使用类似 CSS 的选择器，根据您所写的内容生成优化的实用优先 CSS。

• ✅ 类似CSS的选择器
• ✅ 不需要研究框架
• ✅ 花在文档上的时间更少
• ✅ 纠结&极小的CSS
• ✅ 不需要清除CSS
• ✅ 组件、变量、自定义选择器
• ✅ 它可以生成多个CSS捆绑包

我们也有一个关于Stylify CSS解决了什么问题，以及为什么你应该尝试一下！

安装

使用CLI安装Stylify：

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

在vite.config.js中添加以下配置：

import { defineConfig } from 'vite';
import { stylifyVite } from '@stylify/unplugin';
import solidPlugin from 'vite-plugin-solid';

const stylifyPlugin = stylifyVite({
	bundles: [{ outputFile: './src/stylify.css', files: ['./src/**/*.jsx'] }],
	// 可选
	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, solidPlugin()],
	server: {
		port: 3000,
	},
	build: {
		target: 'esnext',
	},
});

在src/index.js中添加Stylify CSS：

import './stylify.css';

使用方法

Stylify的语法与CSS类似。你只需要写_而不是空格，^而不是引号。

因此，如果我们编辑src/App.jsx：

function App() {
	return (
		<h1 class="font-size:24px margin:12px_24px">
			你好，世界!
		</h1>
	);
}

export default App;

在生产中，你将得到优化的CSS和纠结的HTML：

<h1 class="p u">你好，世界!</h1>

.p{font-size: 24px}
.u{margin: 12px 24px}

Stackblitz Playground

继续尝试Stylify CSS + SolidJS on Stackblitz。

配置

上面的例子并不包括Stylify能做的一切：

• 定义组件
• 添加自定义选择器
• 配置你的宏，如ml:20px为 margin-left。
• 定义自定义屏幕
• 你可以在模板中映射嵌套文件。
• 还有更多

请随时查看文档以了解更多信息 💎。