angular-cli如何添加全局样式？
angular-cli how to add global styles?
我使用 Sass 创建了一个全局样式 sheet 并将其放在 public/style/styles.scss 中。我只指定了背景颜色。
在索引中，我添加了一个link：<link rel="stylesheet" href="style/styles.css">
背景颜色不适用于 body 标签。检查 body 标签后，我可以看到应用了背景色，但被 scaffolding.less:31
否决了
我做错了什么？
我遇到了同样的问题，发现 this example 在 cli 甚至 sass/less 支持之前。我想当前构建的 cli (1.0.0-beta.5) 可能只编译组件级别 sass，甚至可能忽略 /src 文件夹中的 .css。我设法将全局 *.css 放在 public/ 文件夹中，并将其复制到 /dist，但无法从 /src 获得相同的行为，并且预处理器似乎无法编译默认。我想这可能是设计使然，恕我直言，这有点违反直觉。 Angular cli 幸运地构建在 Broccoli 之上，学习如何使用 Broccoli 自定义构建可能非常值得，如下例所示：
这是我最终得到的 angular-cli-build.js 的副本。
'use strict';
/* global require, module */
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
var compileSass = require('broccoli-sass');
var mergeTrees = require('broccoli-merge-trees');
var _ = require('lodash');
var glob = require('glob');
module.exports = function(defaults) {
let sourceDir = 'src';
let app = new Angular2App(defaults, {
sourceDir: sourceDir,
sassCompiler: {
includePaths: [
'src/style'
]
},
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/*.js',
'es6-shim/es6-shim.js',
'reflect-metadata/*.js',
'rxjs/**/*.js',
'@angular/**/*.js'
]
});
let styles = mergeTrees(_.map(glob.sync('src/**/*.scss'), function(sassFile) {
sassFile = sassFile.replace('src/', '');
return compileSass(['src'], sassFile, sassFile.replace(/.scss$/, '.css'));
}));
return mergeTrees([app, styles], { overwrite: true });
};
我一直在使用以下策略（虽然我还没有从 angular-cli 团队看到任何官方解决方案，所以可能有更好的方法）：
如果我所有的 src 文件都在 src/app/... 中，我会在根 ./app 目录中放置一个 app.scss 文件。然后使用当前构建配置自动编译为 css，因此我可以将它包含在我的 index.html 中：
<link rel="stylesheet" type="text/css" href="app/app.css">
如果您的文件结构由于某种原因与默认的 CLI 文件结构不同，只需确保 app.scss 文件包含在您的主要应用程序组件所在的同一目录中。我喜欢这种技术，因为它意味着我不必更改构建，从而减少将来更新项目的痛苦。
自 CLI 的 beta.14 版本（使用 Angular 2.0 final）起，可以在 "styles" 键下的 angular-cli.json 内链接一个全局样式表。这是对相对于 src/ 目录的文件的引用，默认情况下是 style.css。
利用此方法您可以：
- 将全局样式复制到
src/styles.css
- 使用 CSS 导入将外部规则导入
styles.css
- 通过
apps[0].styles 属性 中的 angular-cli.json 添加更多全局样式
另请参阅 angular-cli 的维基中的 Global Styles。
虽然我认为 是记录在案的解决方案，但类似下面的内容对我也适用，并且可能会更清楚哪个组件需要它：
require('style!../../../node_modules/bootstrap/scss/bootstrap-reboot.scss');
或者在使用更新版本的 Angular CLI 时：
require('style-loader!../../../node_modules/bootstrap/scss/bootstrap-reboot.scss');
或：
@Component({
selector: 'my-component',
styles: [require('style-loader!../../../node_modules/bootstrap/scss/bootstrap-reboot.scss')],
styleUrls: ['./my.component.scss']
})
后者可能不被允许；也许不应该同时提供 styles 和 styleUrls，因为我得到 "An object literal cannot have multiple properties with the same name in strict mode" 和 "Duplicate identifier 'styles'"。
将 scss 添加到 angular-cli.json.
的样式数组
我知道这为时已晚，但随着事情的不断变化。截至 2017 年 3 月 16 日
这对我有用。
<link rel="stylesheet" href="src/styles.css">
只需将 src/styles.css 重命名为 src/styles.scss
记得在 .angular-cli.json 中也将 styles.css 重命名为 styles.scss。
hi in angular 4we can add global styles in styles.css
在 angular-cli.json
中引用
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [],
我们可以将所有 css 导入到 styles.css 文件
/* You can add global styles to this file, and also import other style files */
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
@import 'assets/css/test.css';
还有一种解决方法是添加外部CSS，即，
将所有 CSS 放入 assets/css 文件夹，如下所示：
assets/css/style1.css
assets/css/style2.css
assets/css/style3.css
在添加所有外部 CSS 之后，您必须像这样在全局 style.css 中导入它们的引用（即 src/style.css）：
@import 'assets/css/style1.css';
@import 'assets/css/style2.css';
@import 'assets/css/style3.css';
也不要忘记在 angular-cli.json 中包含全局 CSS，如下所示：
"styles": [
"styles.css",
],
对于您的应用程序 <app-root> 范围之外的元素（e.x。<body>），您可以使用其他人提供的解决方案。
如果该元素在您的应用程序中，您也可以不使其成为全局元素，而是在字符串中定义样式，然后将其导入styles 属性 在要使用这些样式的组件 class 装饰器上。
这样你就会得到封装和re-use。它只是以字符串形式编写它的缺点，这可能会限制您的编辑器提供样式静态分析的能力。
AFAIK，angular cli 不会编译它两次。
示例：
const tableStyles = `
table { color: red; }
`;
@Component({
selector: 'app-overview',
templateUrl: './overview.component.html',
styleUrls: ['./overview.component.scss'],
styles: [tableStyles] // <- here
})
export class OverviewComponent { ... }
如果您想在适当的文件中使用样式，可以将相同的逻辑应用于 styleUrls 属性。
示例：
@Component({
selector: 'app-overview',
templateUrl: './overview.component.html',
styleUrls: [
'./overview.component.scss',
'../common/table-styles.scss' // <- here
]
})
export class OverviewComponent { ... }
我正在使用 Angular v8.1.2 和 SCSS 作为样式格式，发现全局 syles.scss 不工作。
在angular.json中是：
"styles": [
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
经过google搜索，我从https://github.com/angular/angular-cli/issues/10855找到了原因：
The issue only reproduces if we have more than one non-empty file in
projects.architect.build.options.styles setting of angular.json.
我的解决方法：
从样式数组中删除 "node_modules/bootstrap/dist/css/bootstrap.min.css" 条目，将 "src/styles.scss" 作为 [ ] 中唯一的文件，然后打开 styles.scss，并在内容顶部添加以下行：
@import "node_modules/bootstrap/dist/css/bootstrap.min";
2019 年 9 月：
大多数其他帖子都是旧帖子。
文件：\angular.json
键：项目 > myProjectNameHere > 架构师 > 构建 > 样式
"styles": [
"src/styles.css",
"node_modules/font-awesome/css/font-awesome.css",
{
"input": "./node_modules/bootstrap/dist/css/bootstrap.css"
}
],
文件：src/styles.css
/* You can add global styles to this file, and also import other style files */
/* That is, have put css that is common for all pages in this file. */
body {
font-family: "Ubuntu", sans-serif;
}
通过以上两点，css 适用于所有页面。
因此，如果您 Angular 8 或以上，就没有什么可做的了。
如果你有问题，那么你只需要清除缓存（或者，执行 Ctrl + Shift + R ）
None 以上答案解释了 Angular 的 CSS 系统中到底发生了什么，或者为什么您可能会看到级联问题。您可能会考虑将所有 CSS 移出 Angular 编译器并移至您自己的外部链接中。
在 Angular 项目中，当您将样式路径直接添加到“angular.json”（较新）或“angular-cli.json”（较旧）设置时文件，Angular 抓取所有这些 CSS 文件，将它们编译成 JavaScript 文件，然后将它们作为嵌入样式吐出到 HTML 文件的头部：
这个angular.json设置：
"styles": [
"src/styles.css",
],
变成 HTML 并添加到 JavaScript 在 DOM 中创建的 gigantic 嵌入式 <style> 标签您的浏览器：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Project</title>
<style>
.mystyle {background:blue;}/* everything in styles.css gets dumped in here! */
</style>
<body>
...
糟糕的 CSS 设计！如果你去浏览器并使用 F12 并查看实际的 DOM 和 CSS angular 在你的浏览器内存中吐出，你只能看到这个。如果您使用组件样式，当这些组件被 Angular 模块等加载到 DOM 时，也会发生同样的事情。它们会被转储到第一个元素下的另一个嵌入样式元素中。
我不是 100% 确定 Angular 的人理解他们在做什么添加这样的嵌入式样式。链接样式中的任何 CSS 可能会被这些嵌入式样式系统隐藏 Angular 使用，如果它们是在链接样式之后插入的。
我不喜欢 Angular 的一件事是，如果您将 CSS IMPORT 标签放在“styles.css”文件中（例如 bootstrap ), 编译器也会抓取这些并将它们吐出到这些嵌入式样式标签中。传统上，将一种样式 sheet 导入另一种样式用于控制级联顺序，因为导入的 sheet 会在父页面中的其他样式之前插入。我们使用@import 来隐藏非常旧的浏览器不支持的样式，并通过这种方式按功能管理大型样式库。因为 Angular 现在忽略了所有这些并将所有这些 CSS 混在一起，你在“index.html”文件的头部留下了一个巨大的嵌入式内联样式块，这非常困难以这种方式控制级联订单。
Angular 的样式系统也不支持使用此内联系统对网站或主题进行换肤，也不支持页面之间链接样式的全局缓存以节省带宽。正如上面提到的那样，将样式 sheets 放在文件夹结构中的位置并不重要。如果它们在 angular.json 中被引用，它们都会以您无法控制的顺序编译到页面头部的这些嵌入式样式 blob 中。
因此，我建议您从“ANGULAR.JSON” 中删除所有样式引用！然后将它们作为链接手动添加回您的“index.html”：
<link href="styles/styles.css" rel="stylesheet" />
...然后通过 删除样式数组路径列表中的样式条目来更改 angular.json 设置文件 然后 将其粘贴回您的assets array list 所以 Angular 知道将 dist 文件夹中的 CSS 文件夹和文件迁移到哪里，如下所示：
"assets": [
"src/styles",
],
"styles": [
],
您的 Angular 应用程序现在仅使用 <link> 或外部 CSS 文件作为 index.html 文件中的样式，而不是 <styles> 或嵌入式 CSS。您仍然可以使用此内部或“嵌入式”Angular 管理的 CSS 系统。我不是 100% 反对它。在极少数情况下，嵌入式 CSS 非常适合支持离线网页。 Angular 有一个很好的系统可以用这种方式控制和操纵 CSS。但在过去的 20 年中，CSS 并不是大多数缓存系统中的传统使用方式。使用“外部”或 <link> CSS，您的主要样式现在会在用户的“本机”浏览器缓存中存储更长的时间，从而节省浏览器的带宽和 rendering/paint 速度。
<link> CSS 让您完全控制您的网站样式、跨浏览器修复、皮肤等。您的前端设计师也可以控制它并且更新独立于 kooky polyfills、预处理、脚本依赖等。您现在还可以重新获得对级联顺序的完全控制权，如果您想完全控制它，这一点至关重要。
链接外部样式也比 Google Angular 损坏的 CSS 系统具有巨大的缓存优势，因为浏览器会在页面刷新或重新访问时自然地缓存所有这些。自 1990 年代以来，我们一直以这种方式使用 CSS，所以我很困惑为什么 Google 又回到了旧的内联样式系统。链接样式更适合管理和缓存 css。我们还将版本控制查询字符串添加到链接的 CSS 文件 (/mystyles.css?v=1.2) 的末尾，以便您可以强制刷新等。再次执行此操作，删除对 [=71 的所有引用=] 在 angular.json 文件中并手动将它们作为链接添加到 index.html 文件的头部。
我认为您可以安全地使用 Angular 的模块化或基于组件的样式系统，只要您了解当您延迟加载或预加载 Angular 模块时，那些嵌入的样式元素会执行在每次新访问或刷新脚本块时从服务器向下推送给用户。还要了解现代浏览器今天的工作方式与旧浏览器的工作方式不同.....新浏览器不会在链接样式之后解析嵌入样式，但会遵守您将它们插入 HTML 页面头部的顺序。换句话说，今天，您在页面中放置它们的顺序在 Angular 最终交付 HTML 时可能无法预测。现在，级联顺序在很大程度上由 HTML 设计人员控制，而不是 W3C 的建议。
我认为这是 Angular 模块化样式系统的主要目的....从设计师那里接管 CSS 的控制权，希望他们不会注意到。但老实说，如果你使用外部 sheets 并遵循基本的级联规则，这是不必要的。
我使用 Sass 创建了一个全局样式 sheet 并将其放在 public/style/styles.scss 中。我只指定了背景颜色。
在索引中，我添加了一个link：<link rel="stylesheet" href="style/styles.css">
背景颜色不适用于 body 标签。检查 body 标签后，我可以看到应用了背景色，但被 scaffolding.less:31
我做错了什么？
我遇到了同样的问题，发现 this example 在 cli 甚至 sass/less 支持之前。我想当前构建的 cli (1.0.0-beta.5) 可能只编译组件级别 sass，甚至可能忽略 /src 文件夹中的 .css。我设法将全局 *.css 放在 public/ 文件夹中，并将其复制到 /dist，但无法从 /src 获得相同的行为，并且预处理器似乎无法编译默认。我想这可能是设计使然，恕我直言，这有点违反直觉。 Angular cli 幸运地构建在 Broccoli 之上，学习如何使用 Broccoli 自定义构建可能非常值得，如下例所示：
这是我最终得到的 angular-cli-build.js 的副本。
'use strict';
/* global require, module */
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
var compileSass = require('broccoli-sass');
var mergeTrees = require('broccoli-merge-trees');
var _ = require('lodash');
var glob = require('glob');
module.exports = function(defaults) {
let sourceDir = 'src';
let app = new Angular2App(defaults, {
sourceDir: sourceDir,
sassCompiler: {
includePaths: [
'src/style'
]
},
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/*.js',
'es6-shim/es6-shim.js',
'reflect-metadata/*.js',
'rxjs/**/*.js',
'@angular/**/*.js'
]
});
let styles = mergeTrees(_.map(glob.sync('src/**/*.scss'), function(sassFile) {
sassFile = sassFile.replace('src/', '');
return compileSass(['src'], sassFile, sassFile.replace(/.scss$/, '.css'));
}));
return mergeTrees([app, styles], { overwrite: true });
};
我一直在使用以下策略（虽然我还没有从 angular-cli 团队看到任何官方解决方案，所以可能有更好的方法）：
如果我所有的 src 文件都在 src/app/... 中，我会在根 ./app 目录中放置一个 app.scss 文件。然后使用当前构建配置自动编译为 css，因此我可以将它包含在我的 index.html 中：
<link rel="stylesheet" type="text/css" href="app/app.css">
如果您的文件结构由于某种原因与默认的 CLI 文件结构不同，只需确保 app.scss 文件包含在您的主要应用程序组件所在的同一目录中。我喜欢这种技术，因为它意味着我不必更改构建，从而减少将来更新项目的痛苦。
自 CLI 的 beta.14 版本（使用 Angular 2.0 final）起，可以在 "styles" 键下的 angular-cli.json 内链接一个全局样式表。这是对相对于 src/ 目录的文件的引用，默认情况下是 style.css。
利用此方法您可以：
- 将全局样式复制到
src/styles.css - 使用 CSS 导入将外部规则导入
styles.css - 通过
apps[0].styles属性 中的angular-cli.json 添加更多全局样式
另请参阅 angular-cli 的维基中的 Global Styles。
虽然我认为
require('style!../../../node_modules/bootstrap/scss/bootstrap-reboot.scss');
或者在使用更新版本的 Angular CLI 时：
require('style-loader!../../../node_modules/bootstrap/scss/bootstrap-reboot.scss');
或：
@Component({
selector: 'my-component',
styles: [require('style-loader!../../../node_modules/bootstrap/scss/bootstrap-reboot.scss')],
styleUrls: ['./my.component.scss']
})
后者可能不被允许；也许不应该同时提供 styles 和 styleUrls，因为我得到 "An object literal cannot have multiple properties with the same name in strict mode" 和 "Duplicate identifier 'styles'"。
将 scss 添加到 angular-cli.json.
的样式数组我知道这为时已晚，但随着事情的不断变化。截至 2017 年 3 月 16 日
这对我有用。
<link rel="stylesheet" href="src/styles.css">
只需将 src/styles.css 重命名为 src/styles.scss
记得在 .angular-cli.json 中也将 styles.css 重命名为 styles.scss。
hi in angular 4we can add global styles in styles.css 在 angular-cli.json
中引用 "prefix": "app",
"styles": [
"styles.css"
],
"scripts": [],
我们可以将所有 css 导入到 styles.css 文件
/* You can add global styles to this file, and also import other style files */
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
@import 'assets/css/test.css';
还有一种解决方法是添加外部CSS，即， 将所有 CSS 放入 assets/css 文件夹，如下所示：
assets/css/style1.css
assets/css/style2.css
assets/css/style3.css
在添加所有外部 CSS 之后，您必须像这样在全局 style.css 中导入它们的引用（即 src/style.css）：
@import 'assets/css/style1.css';
@import 'assets/css/style2.css';
@import 'assets/css/style3.css';
也不要忘记在 angular-cli.json 中包含全局 CSS，如下所示：
"styles": [
"styles.css",
],
对于您的应用程序 <app-root> 范围之外的元素（e.x。<body>），您可以使用其他人提供的解决方案。
如果该元素在您的应用程序中，您也可以不使其成为全局元素，而是在字符串中定义样式，然后将其导入styles 属性 在要使用这些样式的组件 class 装饰器上。
这样你就会得到封装和re-use。它只是以字符串形式编写它的缺点，这可能会限制您的编辑器提供样式静态分析的能力。
AFAIK，angular cli 不会编译它两次。
示例：
const tableStyles = `
table { color: red; }
`;
@Component({
selector: 'app-overview',
templateUrl: './overview.component.html',
styleUrls: ['./overview.component.scss'],
styles: [tableStyles] // <- here
})
export class OverviewComponent { ... }
如果您想在适当的文件中使用样式，可以将相同的逻辑应用于 styleUrls 属性。
示例：
@Component({
selector: 'app-overview',
templateUrl: './overview.component.html',
styleUrls: [
'./overview.component.scss',
'../common/table-styles.scss' // <- here
]
})
export class OverviewComponent { ... }
我正在使用 Angular v8.1.2 和 SCSS 作为样式格式，发现全局 syles.scss 不工作。
在angular.json中是：
"styles": [
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
经过google搜索，我从https://github.com/angular/angular-cli/issues/10855找到了原因：
The issue only reproduces if we have more than one non-empty file in projects.architect.build.options.styles setting of angular.json.
我的解决方法： 从样式数组中删除 "node_modules/bootstrap/dist/css/bootstrap.min.css" 条目，将 "src/styles.scss" 作为 [ ] 中唯一的文件，然后打开 styles.scss，并在内容顶部添加以下行：
@import "node_modules/bootstrap/dist/css/bootstrap.min";
2019 年 9 月：
大多数其他帖子都是旧帖子。
文件：\angular.json
键：项目 > myProjectNameHere > 架构师 > 构建 > 样式
"styles": [
"src/styles.css",
"node_modules/font-awesome/css/font-awesome.css",
{
"input": "./node_modules/bootstrap/dist/css/bootstrap.css"
}
],
文件：src/styles.css
/* You can add global styles to this file, and also import other style files */
/* That is, have put css that is common for all pages in this file. */
body {
font-family: "Ubuntu", sans-serif;
}
通过以上两点，css 适用于所有页面。
因此，如果您 Angular 8 或以上，就没有什么可做的了。
如果你有问题，那么你只需要清除缓存（或者，执行 Ctrl + Shift + R ）
None 以上答案解释了 Angular 的 CSS 系统中到底发生了什么，或者为什么您可能会看到级联问题。您可能会考虑将所有 CSS 移出 Angular 编译器并移至您自己的外部链接中。
在 Angular 项目中，当您将样式路径直接添加到“angular.json”（较新）或“angular-cli.json”（较旧）设置时文件，Angular 抓取所有这些 CSS 文件，将它们编译成 JavaScript 文件，然后将它们作为嵌入样式吐出到 HTML 文件的头部：
这个angular.json设置：
"styles": [
"src/styles.css",
],
变成 HTML 并添加到 JavaScript 在 DOM 中创建的 gigantic 嵌入式 <style> 标签您的浏览器：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Project</title>
<style>
.mystyle {background:blue;}/* everything in styles.css gets dumped in here! */
</style>
<body>
...
糟糕的 CSS 设计！如果你去浏览器并使用 F12 并查看实际的 DOM 和 CSS angular 在你的浏览器内存中吐出，你只能看到这个。如果您使用组件样式，当这些组件被 Angular 模块等加载到 DOM 时，也会发生同样的事情。它们会被转储到第一个元素下的另一个嵌入样式元素中。
我不是 100% 确定 Angular 的人理解他们在做什么添加这样的嵌入式样式。链接样式中的任何 CSS 可能会被这些嵌入式样式系统隐藏 Angular 使用，如果它们是在链接样式之后插入的。
我不喜欢 Angular 的一件事是，如果您将 CSS IMPORT 标签放在“styles.css”文件中（例如 bootstrap ), 编译器也会抓取这些并将它们吐出到这些嵌入式样式标签中。传统上，将一种样式 sheet 导入另一种样式用于控制级联顺序，因为导入的 sheet 会在父页面中的其他样式之前插入。我们使用@import 来隐藏非常旧的浏览器不支持的样式，并通过这种方式按功能管理大型样式库。因为 Angular 现在忽略了所有这些并将所有这些 CSS 混在一起，你在“index.html”文件的头部留下了一个巨大的嵌入式内联样式块，这非常困难以这种方式控制级联订单。
Angular 的样式系统也不支持使用此内联系统对网站或主题进行换肤，也不支持页面之间链接样式的全局缓存以节省带宽。正如上面提到的那样，将样式 sheets 放在文件夹结构中的位置并不重要。如果它们在 angular.json 中被引用，它们都会以您无法控制的顺序编译到页面头部的这些嵌入式样式 blob 中。
因此，我建议您从“ANGULAR.JSON” 中删除所有样式引用！然后将它们作为链接手动添加回您的“index.html”：
<link href="styles/styles.css" rel="stylesheet" />
...然后通过 删除样式数组路径列表中的样式条目来更改 angular.json 设置文件 然后 将其粘贴回您的assets array list 所以 Angular 知道将 dist 文件夹中的 CSS 文件夹和文件迁移到哪里，如下所示：
"assets": [
"src/styles",
],
"styles": [
],
您的 Angular 应用程序现在仅使用 <link> 或外部 CSS 文件作为 index.html 文件中的样式，而不是 <styles> 或嵌入式 CSS。您仍然可以使用此内部或“嵌入式”Angular 管理的 CSS 系统。我不是 100% 反对它。在极少数情况下，嵌入式 CSS 非常适合支持离线网页。 Angular 有一个很好的系统可以用这种方式控制和操纵 CSS。但在过去的 20 年中，CSS 并不是大多数缓存系统中的传统使用方式。使用“外部”或 <link> CSS，您的主要样式现在会在用户的“本机”浏览器缓存中存储更长的时间，从而节省浏览器的带宽和 rendering/paint 速度。
<link> CSS 让您完全控制您的网站样式、跨浏览器修复、皮肤等。您的前端设计师也可以控制它并且更新独立于 kooky polyfills、预处理、脚本依赖等。您现在还可以重新获得对级联顺序的完全控制权，如果您想完全控制它，这一点至关重要。
链接外部样式也比 Google Angular 损坏的 CSS 系统具有巨大的缓存优势，因为浏览器会在页面刷新或重新访问时自然地缓存所有这些。自 1990 年代以来，我们一直以这种方式使用 CSS，所以我很困惑为什么 Google 又回到了旧的内联样式系统。链接样式更适合管理和缓存 css。我们还将版本控制查询字符串添加到链接的 CSS 文件 (/mystyles.css?v=1.2) 的末尾，以便您可以强制刷新等。再次执行此操作，删除对 [=71 的所有引用=] 在 angular.json 文件中并手动将它们作为链接添加到 index.html 文件的头部。
我认为您可以安全地使用 Angular 的模块化或基于组件的样式系统，只要您了解当您延迟加载或预加载 Angular 模块时，那些嵌入的样式元素会执行在每次新访问或刷新脚本块时从服务器向下推送给用户。还要了解现代浏览器今天的工作方式与旧浏览器的工作方式不同.....新浏览器不会在链接样式之后解析嵌入样式，但会遵守您将它们插入 HTML 页面头部的顺序。换句话说，今天，您在页面中放置它们的顺序在 Angular 最终交付 HTML 时可能无法预测。现在，级联顺序在很大程度上由 HTML 设计人员控制，而不是 W3C 的建议。
我认为这是 Angular 模块化样式系统的主要目的....从设计师那里接管 CSS 的控制权，希望他们不会注意到。但老实说，如果你使用外部 sheets 并遵循基本的级联规则，这是不必要的。