在 svelte 中添加动态类名

问题描述

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

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`}>

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

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

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

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

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

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

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

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

解决方法

我认为是 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}`],},// ...
}

,

我认为当 class 属性是一个变量或依赖于一个变量时，它不会在编译期间用于提取样式（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>