webpack Tailwind CSS tree-shaking是否可以在 *.scss模块中使用@apply规则？

iq0todco 于 12个月前发布在 Webpack

关注(0)|答案(1)|浏览(186)

据我所知，Tailwind CSS将进行树型转换，只提供与我正在使用的类捆绑的CSS。因此，在下面的示例中：

<div class="flex flex-row">
</div>

字符串
.最终的Tailwind捆绑包将仅包括：

.flex {
  display: flex;
}
.flex-row {
  flex-direction: row;
}

型
然而，我想知道@apply规则是否也是一样的？所以如果我有：

import styles from 'styles.scss';

export default function Example() {
  return (
    <div className={ styles.flex_row }>
    </div>
  )
}

型
而且...

.flex_row {
  @apply flex flex-row;
}

型
这仍然是树动摇给给予我最小的捆绑顺风类使用？
我已经在谷歌上搜索并阅读了Tailwind的文档，但我还没有能够找到任何东西。我会看看我是否可以看看输出的捆绑包，看看它是否在那里很明显.

webpack

来源：https://stackoverflow.com/questions/77688856/does-tailwind-css-tree-shaking-work-with-apply-rules-inside-scss-modules

1条答案

按热度按时间

bnl4lu3b1#

考虑在@layer base/components/utilities规则中定义规则，并确保Tailwind在Sass编译后处理生成的CSS文件。这使得Tailwind“知道”CSS规则，因此Tailwind将处理并“摇动树”它。
顺便说一句，你也可能希望完全避免@apply，正如Tailwind的创建者Adam Wathan所建议的那样：