在Qwik框架中使用Stylify CSS

Qwik是为边缘地区重新设计的JavaScript框架。没有水化，自动懒散加载，边缘优化。

使用Stylify CSS Vite插件可以在Qwik框架内使用Stylify。

在StackBlitz上试试吧

安装

集成只能通过CLI如NPM或Yarn来安装：

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

使用方法

编辑vite.config.js。

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

const stylifyPlugin = stylifyVite({
	bundles: [
		{ files: ['src/**/*.tsx'], outputFile: 'src/global.css' }
	],
	// 可选的 - https://stylifycss.com/en/docs/unplugin
	// 编译器配置信息 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: {},
		// ...
	}
});

export default defineConfig({
	plugins: [stylifyPlugin]
});

在src/root.tsx中导入global.css：

import './global.css';

为每个页面分割捆绑

捆绑程序也可以为每个页面单独配置。用这种方法，你可以得到尽可能小的CSS。比如说

bundles: [
	//布局
	{ files: ['src/root.tsx', 'src/routes/layout.tsx'], outputFile: 'src/assets/css/layout.css'},
	// 索引页
	{ files: ['src/routes/index.tsx'], outputFile: 'src/assets/css/index.css'},
],

在src/routes/index.tsx中，有以下内容：

import { useStyles$ } from '@builder.io/qwik';
import indexCss from '../assets/css/index.css';
// ...

export default component$(() => {
	useStyles$(indexCss);
	// ...
})

并在src/root.tsx中添加布局导入import './assets/css/layout.css。

配置

有很多的选项你可以配置：

• @stylify/unplugin
• 编译器配置