在我的 Angular 项目中使用 CSS @layer 规则

Question

我想在我的 Angular 项目中使用 CSS @layer 规则。

@layers 的优先级顺序取决于它们的声明顺序（最后声明的优先）。然而，Angular 会自动管理 DOM 中组件导入的顺序。这可能会干扰我的图层声明，因为我无法控制 CSS 优先级顺序（在组件样式表中）。

如果有人可以帮助我，我想知道：

• 如何在具有许多组件的 Angular 项目中使用 @layer CSS 规则？
• 特别是，有没有一种方法可以在特殊样式表中声明图层的顺序，该样式表将在所有组件之前导入（以完全控制 CSS 优先级顺序）？

我在互联网上找不到任何信息，也很难找到有关 Angular 如何将组件导入 dom 的文档

Answer 1

我也遇到了和你一样的问题。经过几个小时的努力，我发现在构建时导入的 CSS 文件 *.css 将包含在生成的 style.css 中，位于 sass 文件 *.scss 的内容之前。

考虑 style.scss 中的以下导入示例。

@layer  app-layer, library-layer;
@import './styles/third-party-library.css'
@import './styles/app';

如果app-layer和library-layer@rule在其对应的文件中定义， 应用层的规则总是获胜。这是因为在 style.css 文件生成中，Angular 首先包含third-party-library.css 内容，然后包含 style.css 中的内容并导入 scss 文件。

此行为在

@layer  app-layer, library-layer;

语句之前从third-party-library.css中定义@layerthird-party-layer，根据CSS规范一旦定义了一个层，该层的顺序就不能改变。

我的解决方法是将我的图层定义写入单独的layers-order.css 文件中，并将其导入到

Style.scss

的顶部。