Svelte 组件的样式泄漏

Question

问题：

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

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

为了说明问题，我设置了一个 sveltekit 骨架项目，然后添加了一个使用 Tailwind 的附加 svelte 组件。当我添加插件时，页面的背景颜色从白色变成灰色。我不明白这是怎么发生的，据我所知，我只在该组件中使用 Tailwind。但风格好像漏了。

github 上的最小示例：

最快的重现方法：

git clone [email protected]: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

您将 tailwind 与 svelte 结合使用的方式是完全错误的。 tldr 的答案是删除

@tailwind

指令并使用

@apply

代替。

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

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

svelte 范围样式的方式是在自定义选择器旁边使用唯一的类名称，例如

.my-element

变为

.my-element.svelte-x57u2q

。这也意味着您必须使用选择器，以便此范围机制可以启动。

但是对于普通顺风来说，那些内置类名必须是全局的才能有用，换句话说就是“泄漏”。这是设计使然，不是错误。

因此，如果您想使用 tailwind 但也想利用 svelte 的作用域样式，

@apply

是唯一的解决方案。

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

Answer 2

我发现最好的解决方案是一侧采用苗条风格，另一侧采用顺风风格。所以，我只是按照文档来编译顺风样式：

https://tailwindcss.com/docs/installation

并将输出样式表链接到我的index.html