免费AI编程助手
Windi CSS Svelte
我们的 Svelte 集成使用 Svelte 预处理器 API，因此在编译步骤之前运行。这给动态改变的类带来了一些限制。
如果您正在使用 SvelteKit，您还可以查看 Vite SvelteKit 指南。
设置指南
以下是 Svelte 和 SvelteKit 使用其入门模板的两个指南。
Svelte
从 NPM 安装 Svelte WindiCSS 预处理器插件
npm i -D svelte-windicss-preprocess
删除不需要的全局 CSS 文件以防止样式中断
- ./public/global.css
删除 index.html 中的样式表链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Svelte app</title>
<link rel='icon' type='image/png' href='/favicon.png'>
- <link rel='stylesheet' href='/global.css'>
<link rel='stylesheet' href='/build/bundle.css'>
<script defer src='/build/bundle.js'></script>
</head>
<body>
</body>
</html>
将 svelte-windicss-preprocess 配置添加到 rollup.config.js
import svelte from 'rollup-plugin-svelte';
import commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';
import css from 'rollup-plugin-css-only';
+ import { windi } from 'svelte-windicss-preprocess';
const production = !process.env.ROLLUP_WATCH;
function serve() {
let server;
function toExit() {
if (server) server.kill(0);
}
return {
writeBundle() {
if (server) return;
server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
stdio: ['ignore', 'inherit', 'inherit'],
shell: true
});
process.on('SIGTERM', toExit);
process.on('exit', toExit);
}
};
}
export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/build/bundle.js'
},
plugins: [
svelte({
+ preprocess: [
+ windi({}),
+ ],
compilerOptions: {
// enable run-time checks when not in production
dev: !production
}
}),
// we'll extract any component CSS out into
// a separate file - better for performance
css({ output: 'bundle.css' }),
// If you have external dependencies installed from
// npm, you'll most likely need these plugins. In
// some cases you'll need additional configuration -
// consult the documentation for details:
// https://github.com/rollup/plugins/tree/master/packages/commonjs
resolve({
browser: true,
dedupe: ['svelte']
}),
commonjs(),
// In dev mode, call `npm run start` once
// the bundle has been generated
!production && serve(),
// Watch the `public` directory and refresh the
// browser on changes when not in production
!production && livereload('public'),
// If we're building for production (npm run build
// instead of npm run dev), minify
production && terser()
],
watch: {
clearScreen: false
}
};
更新 App.svelte
<script>
export let name;
</script>
<main>
<h1>Hello {name}!</h1>
<p>Visit the <a href="https://svelte.dev/tutorial" rel="external nofollow" target="_blank" >Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>
+ <style windi:preflights:global windi:safelist:global>
+ </style>
- <style>
- main {
- text-align: center;
- padding: 1em;
- max-width: 240px;
- margin: 0 auto;
- }
-
- h1 {
- color: #ff3e00;
- text-transform: uppercase;
- font-size: 4em;
- font-weight: 100;
- }
-
- @media (min-width: 640px) {
- main {
- max-width: none;
- }
- }
- </style>
SvelteKit
从 NPM 安装 Svelte WindiCSS 预处理器插件
npm i -D svelte-windicss-preprocess
将 svelte-windicss-preprocess 配置添加到 svelte.config.js
+ import { windi } from "svelte-windicss-preprocess";
/** @type {import('@sveltejs/kit').Config} */
const config = {
+ preprocess: [
+ windi({})
+ ],
kit: {
// hydrate the <div id="svelte"> element in src/app.html
target: '#svelte'
}
};
export default config;
添加布局文件
+ ./src/routes/__layout.svelte
+ <nav>
+ <a href=".">Home</a>
+ <a href="about">About</a>
+ <a href="settings">Settings</a>
+ </nav>
+ <slot></slot>
+ <style windi:preflights:global windi:safelist:global>
+ </style>
文档
选项
interface Options {
silent?: boolean
mode?: 'development' | 'production'
configPath?: string
disableFormat?: boolean
devTools?: {
enabled: boolean
completions?: boolean
}
safeList?: string
preflights?: boolean
}
自定义预处理信息
在 v4 中，我们为 svelte 样式标签引入了自定义属性的新功能集，无论设置如何，都可以轻松直接地进行集成。非范围样式将根据其文档以 :global() 用于类和 -global- 用于关键帧以 svelte 方式处理。
预检
Svelte 的本质是确定 CSS 样式的范围并删除未使用的样式，如果您将预检添加到布局包装器并希望该样式也可用于所有其他 .svelte 文件，这可能会导致问题。另一方面，如果编译为自定义元素，则不能使用 :global() 样式。为了让用户决定在哪里放置预检以及决定它们应该是全局的还是范围的，我们有以下语法：
<!-- Layout.svelte -->
<script>
</script>
<slot />
<!-- use this for scoped preflights -->
<style windi:preflights>
</style>
<!-- use this for global preflights -->
<style windi:preflights:global>
</style>
Safe list
有时您希望拥有基于脚本标签中某些逻辑的动态类。由于 svelte-windicss-preprocess 在 svelte 编译步骤之前运行，因此它无法知道此动态值。有很多方法可以解决这个问题，要么在运行时使用 windi，要么使用捆绑器设置而不是这个预处理器，或者如果你一开始就知道所有可能的类，将它们添加到安全列表中。
与预检类似，此安全列表需要在您需要的任何地方可用，并且还具有范围和全局性。
<!-- Layout.svelte -->
<script>
let shade = 100;
</script>
<div class="bg-red-{shade}">
I am dynamic!
</div>
<!-- use this for scoped safelist classes -->
<style windi:safelist>
</style>
<!-- use this for global safelist classes -->
<style windi:safelist:global>
</style>
Windi CSS 类
默认情况下，所有内联使用的 Windi CSS 类都将使用原生的 svelte 逻辑来限定范围。这有它的优点（你可以在网上找到很多讨论）。然而，使用基于实用程序的 CSS 框架没有太多需要确保类不会被覆盖，因为例如bg-gray-600 将始终具有相同的 CSS 代码，无论它使用哪个 .svelte 文件。您可能希望确保更大的文件大小并使用不受范围限制的 Windi CSS 类，但可能希望按文件选择此文件。
要使所有 Windi CSS 类在一个 .svelte 全局中，借助 :global() 您可以修改/添加以下样式标签。
<style windi:global>
</style>
自定义样式
您可能需要在您的项目中定义自定义 CSS 类，并且想要决定它们是范围内的还是全局的，与 Windi CSS 分开。您可以使用以下语法：
<!-- all styles with :global() -->
<style global>
.btn {
background: green;
}
</style>
<!-- selective or all scoped -->
<style>
:global(.btn) {
background: green;
}
.btnTwo {
background: red;
}
</style>
您可以组合这些属性中的任何一个，因此完整样式标签可以如下所示：
<style global windi:global windi:preflights:global windi:safelist:global>
.custom{
background: black;
}
</style>
VS Code 插件
使用特殊的 CSS 标记语法以及上述属性，将破坏 VS Code 的 CSS 诊断。请确保禁用它们。如果您使用 Svelte for VS Code，请将此设置添加到您的 VS Code 配置文件中。
{
"svelte.plugin.css.diagnostics.enable": false
}
更多建议：