在 svelte 中添加动态类名答案

【问题标题】：adding dynamic class name in svelte在 svelte 中添加动态类名
【发布时间】：2021-04-09 00:59:19
【问题描述】：

我目前正在编写一个具有苗条、工兵和顺风的应用程序。因此，为了顺风工作，我已将其添加到我的汇总配置中

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

所有这些都有效，但我在动态类名方面遇到了一些问题。

写这样的东西似乎总是有效的

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

class-a 和 class-b 都将包含在最终发出的 CSS 中，并且一切正常。

但是当我尝试添加一个变量类名时它不起作用。所以想象一下：

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

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

但如果我把它改成这样：

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

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

所以我的猜测是编译器看到没有使用 css 并且它被删除了。而且我想我的问题是，是否有任何方法可以从顺风中强制所有样式？这样我就可以使用更多的动态类名

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

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

edit: 可以补充一下，我在日志中得到了一堆打印信息，说有一些未使用的 CSS 选择器似乎与所有顺风类匹配

【问题讨论】：

标签： css svelte tailwind-css rollup sapper

【解决方案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}`],
    },
  },
  // ...
}

【讨论】：

【解决方案2】：

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

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

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

选项 1：

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

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

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

【讨论】：