在 svelte 中添加动态 class 名称

Question

我目前正在使用 svelte、sapper 和 tailwind 编写应用程序。所以为了让顺风工作，我已经将它添加到我的汇总配置中

svelte({
        compilerOptions: {
          dev,
          hydratable: true,
        },
        preprocess: sveltePreprocess({
          sourceMap: dev,
          postcss: {
            plugins: [
              require("tailwindcss"),
              require("autoprefixer"),
              require("postcss-nesting"),
            ],
          },
        }),
        emitCss: true,
      })

所有这些都有效，但我遇到了一些动态 class 名称的问题。

写这样的东西似乎总能奏效

  <div class={true ? 'class-a' : 'class-b'}>

class-a 和 class-b 都将包含在最终发出的 CSS 中，一切都按预期进行。

但是当我尝试添加变量 class 名称时，它不起作用。想象一下：

  <div class={`col-span-6`}>

它会完全按照预期工作，并且会从 tailwind 中的 css class col-span-6 获得正确的样式。

但是如果我把它改成这样：

  <div class={`col-span-`}>

那么该样式将不会被包含。另一方面，如果我已经有一个带有 class col-span-6 的 DOM 元素，那么样式将被添加到两个元素中。

所以我的猜测是编译器发现 css 没有被使用，它被删除了。我想我的问题是，是否有任何方法可以从顺风中强制采用所有样式？这样我就可以使用更动态的 class 名称

不确定它是否相关，但我一直在测试它的组件有这个样式块

<style>
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
</style>

编辑： 可以补充一点，我在日志中得到一堆打印件，说有未使用的 css 选择器似乎匹配所有顺风 classes

Answer 1

我认为是 purgeCSS（内置于 tailwind 2.0）无法识别动态类。

很难解决每个顺风问题类，但如果你没有很多顺风，你可以 manually safe list those classnames:

// tailwind.config.js
module.exports = {
  purge: {
    content: ['./src/**/*.html'],

    // These options are passed through directly to PurgeCSS
    options: {
      // Generate col-span-1 -> 12
      safelist: [...Array.from({ length: 12. }).fill('').map((_, i) => `col-span-${i + 1}`],
    },
  },
  // ...
}

Answer 2

我认为当 class 属性是一个变量或依赖于一个变量时，它不会在编译期间用于提取样式（class- 不是在编译期间评估而是在运行时评估），因为svelte 将其标记为未使用的 css 选择器，因为编译代码时不知道 class 属性的值。

要强制 svelte 包含您的样式，您必须将其标记为全局样式，为此我们有两个选择：

<script>
// component logic goes here
</script>
div class={`class-`}/>

选项 1：

<style>
 :global(.class-6){
 // style goes here
 }
</style>

选项 2：这会将您的所有样式标记为全局样式

<style global>
 .class-6{
 // style goes here
 }
</style>

Answer 3

我遇到了同样的问题，<div class="pl-{indent*4}">在 svelte 中不工作。

我的解决方案是使用内联样式，

<div style="padding-left:{indent}rem">,

这是从pl-1=padding-left: 0.25rem; /* 4px */推断出来的。

我觉得比较简单 class.

在 svelte 中添加动态 class 名称

adding dynamic class name in svelte

css

rollup

svelte

tailwind-css

sapper