Angular v12 组件样式文件不编译tailwindcss @apply答案

【问题标题】：Angular v12 Component style files not compiling tailwindcss @applyAngular v12 组件样式文件不编译tailwindcss @apply
【发布时间】：2021-12-21 14:03:00
【问题描述】：

我是计算机科学专业的学生，我正在研究一个项目。我目前尝试使用 Angular V12 为 Angular 框架开发组件库。对于样式我想使用 Tailwindcss （特别是因为它让我在某些点上处理媒体查询......）。无论如何，当我构建库并在另一个项目中对其进行测试时，没有包含顺风样式。

我从 tailwind 文档中知道，您可以在普通 scss 中使用一些指令或函数，例如 @apply。

为了让您更好地理解该问题，我将 github 存储库链接到库的源代码以供参考。我有一个按钮组件，应该应用一些顺风样式。这是通过为名为@987654322@ 的html 元素指定一个类来完成的。此类在button.component.scss 文件中定义。该文件在button.component.ts 文件中也作为styleUrl 引用。所以我的问题是：如何解决在button.component.scss 内使用@apply 未应用样式的问题？

这是button.component.scss中定义样式的方式：

.btn {
  @apply px-2 py-1 text-sm rounded-sm transition-all bg-placeholder-light hover:bg-placeholder active:bg-placeholder-dark relative border-2 border-transparent;
}

这个.btn 类然后像这样被应用到 html 元素：

<button class="btn" (click)="clicked($event)">
    <ng-content></ng-content>
</button>

导出它不会应用之前定义的类。但是，如果我像这样直接应用类属性中的样式：

<button class="px-2 py-1 text-sm rounded-sm transition-all bg-placeholder-light hover:bg-placeholder active:bg-placeholder-dark relative border-2 border-transparent" (click)="clicked($event)">
    <ng-content></ng-content>
</button>

一切都按预期进行。这似乎是一个非常奇怪的行为，因为我期望 button.component.scss 文件以某种方式以正确的样式编译。

有没有办法解决这个问题？还是我必须采取非常不同的方法？我知道我可以像上一个示例一样简单地应用样式，但我想让开发人员可以选择添加像 btn-primary 这样的类（这会添加额外的样式）。

我提前感谢大家抽出时间来调查我的问题。希望有人可以帮助我解决这个问题。

希望你有一个美好的一天！

PS：repo 的链接：https://github.com/z3ttee/alliance-ngx/tree/issue/tailwind/projects/alliance-ngx（你可以使用分支 issue/tailwind）

【问题讨论】：

我也在努力解决这个问题，你最后找到解决方案了吗？

标签： angular sass tailwind-css angular-library

【解决方案1】：

我找到了解决方案，假设您发布的组件名为ui-components。

在父项目（使用您的组件的项目）上修改您的顺风配置，使其具有如下内容：

module.exports = {
  content: ['./src/**/*.html', './src/**/*.ts', './node_modules/ui-components/**/*.{html,ts,js}'],
  variants: {},
  plugins: [],
  corePlugins: {
  },
};

【讨论】：