在 SolidJS 中使用 Stylify CSS

SolidJS是一个用于构建用户界面的简单和高性能反应性的框架。

在StackBlitz上试试吧

如何将 Stylify CSS 与 SolidJS 和 Vite.js 整合起来

下面的例子适用于Vite - SolidJS模板。然而，您可以使用下面的例子，并为React.js、Vue和您使用的任何其他框架配置它。

首先，使用 NPM 或 Yarn 安装 @stylify/unplugin 包：

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/stylify.css的路径添加到src/index.js文件中：

import './stylify.css';

现在运行yarn dev。src/stylify.css文件将被生成。

配置

有很多选项你可以配置：

• @stylify/unplugin
• 编译器配置