数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究为什么 Tailwind CSS 在 Angular 组件的 SCSS 文件中不起作用？
Tailwind CSS 是一种实用优先的 CSS 框架，它通过使用大量预定义的类来简化样式化过程，这些类可以直接应用于 HTML。但是，当与 Angular 组件的 SCSS 文件一起使用时，有时会出现问题，尤其是在 Tailwind CSS 默认情况下并非设计为导入到单个组件样式中时。本文探讨了 Tailwind CSS 在 Angular 组件 SCSS 文件中无法正常工作的主要问题，并提出了解决相关问题的方案。
目录
Tailwind CSS 在 Angular 组件的 SCSS 文件中不起作用可能有多种原因；我们已经涵盖了所有这些原因。
Tailwind CSS 全局生效，而非按组件
Tailwind CSS 通常在应用程序中全局使用。当您将 Tailwind 导入 Angular 项目时，应该只导入一次，最好是在全局样式表中，例如 `styles.scss` 或 `styles.css`。全局导入允许实用程序类在整个 Angular 应用程序中可用。
解决方案
通过在 `src/styles.scss` 文件中全局导入 Tailwind CSS，使其在 Angular 中有效使用。
tailwind base; tailwind components; tailwind utilities;
此配置使所有 Tailwind 实用程序在整个应用程序中可用。通常，您无需将 Tailwind 导入到各个组件的 SCSS 文件中，因为 Angular 也会将全局样式应用于组件的模板。
Angular 组件样式默认情况下是封装的
Angular 组件利用视图封装将样式隔离到各个组件。在没有任何配置的情况下，Angular 会将唯一的属性选择器附加到每个组件的 HTML 元素和样式，以防止它们泄漏到应用程序的其他部分。这可能导致在组件的 SCSS 文件内部忽略全局定义的 Tailwind 类。
Angular 的三种封装模式
- **模拟（默认）：**样式的作用域限定在组件内，但全局样式仍然会被应用。
- **无：**完全没有封装，因此全局样式会应用于组件。
- **Shadow DOM：**使用 Shadow DOM v1 规范来提供严格的样式封装。
解决方案
如果您需要 Tailwind 实用程序影响特定组件但遇到问题，可以在该组件的 TypeScript 文件中简单地将 `ViewEncapsulation` 设置为 `None`。
import { Component, ViewEncapsulation } from "@angular/core";
Component({
selector: "app-example",
templateUrl: "./example.component.html",
styleUrls: ["./example.component.scss"],
encapsulation: ViewEncapsulation.None,
});
export class ExampleComponent {}
这将删除封装，因此可以直接在组件内应用 Tailwind 类。但是，此方法应谨慎使用，因为它可能导致组件之间的样式冲突。
SCSS 文件中无法识别 Tailwind 类
这也可能是 Tailwind CSS 在 Angular 组件的 SCSS 文件中不起作用的原因：Tailwind 类不会自动在组件内部找到的 SCSS 文件中可用。Tailwind CSS 的类是通过 PostCSS 插件创建的，需要使用 `@apply` 指令才能从 SCSS 或 CSS 文件中使用它们。但 `@apply` 指令仅在某些设置下有效，因此在 Angular 的情况下，它的 SCSS 编译默认情况下不会找到它。
解决方案
通过直接在组件的 HTML 模板中使用 Tailwind CSS 类来应用它们，而不是使用 SCSS 文件，因为 SCSS 的兼容性可能很困难。
使用 PostCSS 在 SCSS 中配置 Tailwind CSS
如果您要在 SCSS 文件内部使用 Tailwind 的 `@apply` 指令，有时您需要修改 Angular 构建配置以允许对 Tailwind 的 CSS 代码进行后处理。在您的项目根目录中，如果缺少 `postcss.config.js` 文件，则需要添加它。
tailwindcss: {},
autoprefixer: {},
},
};
然后，确保您的 Angular 项目已配置为处理此 PostCSS 设置。这可能需要额外的配置，具体取决于您的 Angular 版本和构建设置。
缺少 Tailwind 指令或配置错误
有时，Tailwind CSS 不起作用是由于缺少指令或配置错误。Tailwind 需要某些指令（`@tailwind base`、`@tailwind components`、`@tailwind utilities`）来加载其样式。
解决方案
确保您已在全局 `styles.scss` 文件中正确导入了 Tailwind 指令。如果您没有这样做，Tailwind 的样式将无法在您的 Angular 组件中使用。
tailwind base; tailwind components; tailwind utilities;
仔细检查您的 Tailwind 配置文件（`tailwind.config.js`），以确保它包含所有 Angular 组件模板的正确路径。`tailwind.config.js` 中的 `content` 数组应包含 Angular 组件的路径，以便 Tailwind 扫描它们并生成相应的 CSS。
module.exports = {
content: ["src{html,ts}"],
theme: {
extend: {},
},
plugins: [],
};
缓存问题
也许在您的某个配置中，一些 Tailwind 更改不会反映出来；好吧，也许问题源于在 Angular 构建缓存中无法识别的样式缓存。
解决方案
您必须重新启动并清除 Angular 的缓存才能使上述过程成为可能。您必须使用“ng stop”停止服务器。之后，您可以运行 ng serve–force 命令
ng serve --force
上述命令强制 Angular 使用最新的 Tailwind 更新重新编译您的项目。
21 次浏览
