Tailwind 在 Angular 9 中使用自定义 scss 文件进行扩展答案

【问题标题】：Tailwind extend with custom scss file in Angular 9Tailwind 在 Angular 9 中使用自定义 scss 文件进行扩展
【发布时间】：2020-09-25 14:30:27
【问题描述】：

我在我的 Angular 9 项目中使用 Tailwind，但我无法使用另一个文件中的样式规则对其进行自定义。

这是我的 tailwind.scss 文件

@tailwind base;
@tailwind components;
@import "styles/buttons"; // doesn't work
@tailwind utilities;

在styles目录下的_buttons.scss中：

.btn {
  @apply bg-red-600;
}

但是这种风格没有被采纳。

如果我这样做是内联的，它可以工作，即

@tailwind base;
@tailwind components;
.btn {
  @apply bg-red-600; // this works
}
@tailwind utilities;

但最好有单独的文件来管理它。

【问题讨论】：

【解决方案1】：

根据@MikeOne 的建议，我将导入更改为以下有效：

@import "tailwindcss/base";
@import "./styles/custom.css";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

我还在 angular.json 文件中设置了样式预处理器路径：

"stylePreprocessorOptions": {
   "includePaths": [
      "./node_modules"
   ]
}

【讨论】：