WebPack / 复制 Tailwind CSS 的 @apply 指令以远离 SASS 中的 @extend 的方法

Posted 2023-03-06

【中文标题】WebPack / 复制 Tailwind CSS 的 @apply 指令以远离 SASS 中的 @extend 的方法

【英文标题】：WebPack / Method of replicating Tailwind CSS's @apply directive to move away from @extend in SASS

【发布时间】：2019-07-19 01:15:55

【问题描述】：

我正在研究一个介于 ITCSS 和 Tailwind 之间的内部 CSS“框架”/方法。

我们使用了很多实用类，但有时实际的类名太长，我们希望将其提取到自己的类中。

这是一个伪示例：

<button class="p-2 bg-primary elevate-1">Click Me</button

我想做什么：

.btn 
    @extend .p-2;
    @extend .bg-primary;
    @extend .elevate-1;

我知道应该避免使用@extend，所以希望不要使用该方法。

是否有一个 webpack 插件可以让你使用 @extend 而不会出现问题？

或者，有谁知道 Adam Wathan 是如何创建 @apply 指令的：https://tailwindcss.com/docs/extracting-components/#extracting-utility-patterns-with-apply

取自文档，他可以这样做：

.btn-blue 
    @apply bg-blue text-white font-bold py-2 px-4 rounded;

这是他写的 SASS 函数吗，如果是的话，有什么关于如何创建类似的信息吗？

谢谢。

【问题讨论】：

这还不可能

【参考方案1】：

Tailwind 使用PostCSS 进行 CSS 转换。

请参阅What is @apply in CSS? 了解更多上下文。