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

Posted 2023-03-07

【中文标题】Tailwind 在 Angular 9 中使用自定义 scss 文件进行扩展

【英文标题】：Tailwind extend with custom scss file in Angular 9

【发布时间】：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;

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

【问题讨论】：

我认为诀窍是不要将 @tailwind 用于 base、comp 和 utils，而是简单地对它们进行正常导入..

你的意思是像 @import "node_modules/tailwindcss/dist/base.css" 吗？这似乎也不起作用

好的 - 为我做的.. 但也许我的设置不同.. scss 反正..

道歉迈克你是对的，我走错了路。我已经更新了答案

【参考方案1】：

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

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

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

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