免費(fèi)AI編程助手
Windi CSS Svelte
我們的 Svelte 集成使用 Svelte 預(yù)處理器 API，因此在編譯步驟之前運(yùn)行。這給動(dòng)態(tài)改變的類帶來了一些限制。
如果您正在使用 SvelteKit，您還可以查看 Vite SvelteKit 指南。
設(shè)置指南
以下是 Svelte 和 SvelteKit 使用其入門模板的兩個(gè)指南。
Svelte
從 NPM 安裝 Svelte WindiCSS 預(yù)處理器插件
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 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 預(yù)處理器插件
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>
文檔
選項(xiàng)
interface Options {
silent?: boolean
mode?: 'development' | 'production'
configPath?: string
disableFormat?: boolean
devTools?: {
enabled: boolean
completions?: boolean
}
safeList?: string
preflights?: boolean
}
自定義預(yù)處理信息
在 v4 中，我們?yōu)?nbsp;svelte 樣式標(biāo)簽引入了自定義屬性的新功能集，無論設(shè)置如何，都可以輕松直接地進(jìn)行集成。非范圍樣式將根據(jù)其文檔以 :global() 用于類和 -global- 用于關(guān)鍵幀以 svelte 方式處理。
預(yù)檢
Svelte 的本質(zhì)是確定 CSS 樣式的范圍并刪除未使用的樣式，如果您將預(yù)檢添加到布局包裝器并希望該樣式也可用于所有其他 .svelte 文件，這可能會(huì)導(dǎo)致問題。另一方面，如果編譯為自定義元素，則不能使用 :global() 樣式。為了讓用戶決定在哪里放置預(yù)檢以及決定它們應(yīng)該是全局的還是范圍的，我們有以下語法：
<!-- 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
有時(shí)您希望擁有基于腳本標(biāo)簽中某些邏輯的動(dòng)態(tài)類。由于 svelte-windicss-preprocess 在 svelte 編譯步驟之前運(yùn)行，因此它無法知道此動(dòng)態(tài)值。有很多方法可以解決這個(gè)問題，要么在運(yùn)行時(shí)使用 windi，要么使用捆綁器設(shè)置而不是這個(gè)預(yù)處理器，或者如果你一開始就知道所有可能的類，將它們添加到安全列表中。
與預(yù)檢類似，此安全列表需要在您需要的任何地方可用，并且還具有范圍和全局性。
<!-- 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 類
默認(rèn)情況下，所有內(nèi)聯(lián)使用的 Windi CSS 類都將使用原生的 svelte 邏輯來限定范圍。這有它的優(yōu)點(diǎn)（你可以在網(wǎng)上找到很多討論）。然而，使用基于實(shí)用程序的 CSS 框架沒有太多需要確保類不會(huì)被覆蓋，因?yàn)槔鏱g-gray-600 將始終具有相同的 CSS 代碼，無論它使用哪個(gè) .svelte 文件。您可能希望確保更大的文件大小并使用不受范圍限制的 Windi CSS 類，但可能希望按文件選擇此文件。
要使所有 Windi CSS 類在一個(gè) .svelte 全局中，借助 :global() 您可以修改/添加以下樣式標(biāo)簽。
<style windi:global>
</style>
自定義樣式
您可能需要在您的項(xiàng)目中定義自定義 CSS 類，并且想要決定它們是范圍內(nèi)的還是全局的，與 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>
您可以組合這些屬性中的任何一個(gè)，因此完整樣式標(biāo)簽可以如下所示：
<style global windi:global windi:preflights:global windi:safelist:global>
.custom{
background: black;
}
</style>
VS Code 插件
使用特殊的 CSS 標(biāo)記語法以及上述屬性，將破壞 VS Code 的 CSS 診斷。請(qǐng)確保禁用它們。如果您使用 Svelte for VS Code，請(qǐng)將此設(shè)置添加到您的 VS Code 配置文件中。
{
"svelte.plugin.css.diagnostics.enable": false
}
更多建議：