Svelte 组件的样式泄漏

Question

问题：

我想在我的 Svelte 组件之一中为 TailwindCSS 使用插件 (daisyUI)。 看起来样式信息从该组件泄漏并影响了整个站点。 我怎样才能避免这种情况？

我认为这与 daisyUI 无关。 下面我描述了一个基于 sveltekit 的最小可重现示例。 但问题与 sveltekit 无关。 我在开发不使用 sveltekit 的 webextension 时遇到了这个问题。 sveltekit 设置只是为了对这个问题进行尽可能小的演示。

为了说明这个问题，我建立了一个 sveltekit 框架项目，然后添加了一个使用 Tailwind 的附加 svelte 组件。 添加插件后，页面的背景颜色从白色变为灰色。 我不明白这是怎么发生的，据我所知，我只在该组件中使用 Tailwind。 但是样式似乎泄漏了。

github 上的最小示例：

最快的重现方式：

git clone git@github.com:lhk/minimum_example.git
cd minimum_example
npm install
npm run dev -- -- open

现在您可以编辑tailwind.config.cjs并添加/删除插件：

plugins: [
  //require("daisyui")
],

分步说明

我想将 Svelte 与 Tailwind 和 DaisyUI 一起使用。

这是一个最小的项目设置

# choose the skeleton project, typescript syntax and no to everything else
npm create svelte@latest minimum_example

cd minimum_example
npm install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init tailwind.config.cjs -p
npm i --save-dev daisyui

现在编辑 tailwind.config.cjs：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{html,js,svelte,ts}'], theme: {
    extend: {},
  },
  plugins: [
    //require("daisyui")
  ],
}

在src/components/Problem.svelte下添加一个新的 Svelte 组件：

<p class="bg-blue-700">Using Tailwind class</p>

<style lang="postcss">
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
</style>

并将其包含在src/routes/+page.svelte ：

<script lang="ts">
    import Problem from "./../components/Problem.svelte";
</script>

<h1>Welcome to SvelteKit</h1>
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>

<Problem></Problem>

您可以运行该项目

npm run dev -- -- open

如果您打开该网站，您将看到 sveltekit 框架应用程序，以及一段带有蓝色背景的段落（这是我对 Tailwind 正在运行的测试）。 现在您可以取消注释tailwind.config.cjs中的插件。 页面的背景将变为灰色。 我认为这是一个以某种方式从 Tailwind 插件泄漏到整个站点的主题。

Answer 1

你在 svelte 中使用 tailwind 的方式是完全错误的。 tldr 的答案是删除@tailwind指令并改用@apply 。

<p class="my-element">Using Tailwind class</p>

<style lang="postcss">
    .my-element {
      @apply bg-blue-700;
    }
</style>

svelte 范围 styles 的方式是在自定义选择器旁边使用唯一的 class 名称，例如.my-element变为.my-element.svelte-x57u2q 。 这也意味着您必须使用选择器，以便可以启动此范围机制。

但是对于 vanilla tailwind，那些内置的 class 名称必须是全局的才能有用，换句话说就是“泄露”。 这是设计使然，而不是错误。

因此，如果您想使用@apply但又想利用 svelte 的作用域样式，@apply 是唯一的解决方案。

官方文档有一个标题为Using @apply with per-component CSS 的部分揭示了更多技术细节，我认为值得一读。