我使用sass创建了一个全局样式表并将其放入public/style/styles.scss.我只指定了背景颜色.
在索引中,我添加了一个链接: <link rel="stylesheet" href="style/styles.css">
背景颜色不适用于body标签.在检查身体标签时,我可以看到背景颜色被应用但被否决了scaffolding.less:31
我做错了什么？
提前致谢
fil*_*oxo 38
从CLI的beta.14版本(使用Angular 2.0 final)开始,可以angular-cli.json在"样式"键下链接全局样式表.这是对相对于src/目录的文件的引用style.css,默认情况下.
利用这种方法,您可以:
src/styles.cssstyles.cssapps[0].styles属性添加更多全局样式angular-cli.json又见全局样式中angular-cli的维基.
Sto*_*ely 11
上述答案都没有解释 Angular 的 CSS 系统中真正发生了什么，或者为什么您可能会看到级联问题。您可能会考虑将所有 CSS 移出 Angular 编译器并移至您自己的外部链接中。
在 Angular 项目中，当您将样式路径直接添加到“angular.json”（较新）或“angular-cli.json”（较旧）设置文件中时，Angular 会抓取所有这些 CSS 文件，将它们编译成 JavaScript 文件，然后将它们作为嵌入样式吐出到 HTML 文件的头部：
这个 angular.json 设置：
"styles": [
"src/styles.css",
],
转换为 HTML 并添加到JavaScript 在浏览器的 DOM 中创建的巨大嵌入<style>标签中：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Project</title>
<style>
.mystyle {color:blue;}/* everything in styles.css gets dumped in here! */
</style>
<body>
...
糟糕的 CSS 设计！只有在您转到浏览器并使用 F12 并查看浏览器内存中实际 DOM 和 CSS 角度输出时，您才能看到这一点。如果您使用组件样式，当这些组件被 Angular 模块等加载到 DOM 时，会发生同样的事情。它们被转储到第一个下的另一个嵌入式样式元素中。
我不是 100% 确定 Angular 的人明白他们在做什么添加这样的嵌入样式。链接样式中的任何 CSS 都可以被 Angular 使用的这些嵌入式样式系统隐藏，如果它们是在链接样式之后插入的。
我不喜欢 Angular 的一件事是，如果您将 CSS IMPORT 标签放在“styles.css”文件中（例如用于引导），编译器也会抓取这些标签并将它们吐出到这些嵌入的样式标签中，以及. 传统上，将一个样式表导入另一个样式表用于控制级联顺序，因为导入的表在父页面中的其他样式之前插入。我们使用@import 来隐藏非常旧的浏览器不支持的样式，并通过这种方式按功能管理大型样式库。因为 Angular 现在忽略了所有这些并将所有这些 CSS 混在一起，所以在“index.html”文件的头部留下了一个巨大的嵌入式内联样式块，并且很难以这种方式控制级联顺序。
Angular 的样式系统也不支持使用此内联系统的网站或主题换肤，也不支持页面之间链接样式的全局缓存，以节省带宽。正如上面提到的那样，将样式表放在文件夹结构中的位置并不重要。如果它们在 angular.json 中被引用，它们都会以您无法控制的顺序编译到页面头部的这些嵌入样式 blob 中。
因此，我建议您从 "ANGULAR.JSON" 中删除所有样式引用！然后将它们手动添加回您的“index.html”，如下所示：
<link href="styles/styles.css" rel="stylesheet" />
...然后通过删除样式数组路径列表中的样式条目然后将其粘贴回资产数组列表来更改 angular.json 设置文件，以便 Angular 知道将 CSS 文件夹和文件迁移到 dist 文件夹中的位置，如下所示：
"assets": [
"src/styles",
],
"styles": [
],
您的 Angular 应用程序现在只使用<link>或使用外部 CSS 文件作为 index.html 文件中的样式，而不是使用<styles>或嵌入 CSS。您仍然可以使用这个内部或“嵌入式” Angular 管理的 CSS 系统。我不是 100% 反对它。在极少数情况下，嵌入式 CSS 非常适合支持离线网页。Angular 有一个很好的系统来以这种方式控制和操作 CSS。但过去 20 年来，大多数缓存系统中使用 CSS 的方式并不是传统上的。使用“外部”或<link>CSS，您的主要样式现在可以更长时间地存储在用户的“本机”浏览器缓存中，从而节省浏览器的带宽和渲染/绘制速度。
<link>CSS 让你完全控制你的网站样式、跨浏览器修复、皮肤等。你的前端设计师也可以控制它，更新独立于古怪的 polyfills、预处理、脚本依赖等。你现在也回来了完全控制您的级联顺序，如果您想完全控制它，这一点至关重要。
与 Google Angular 损坏的 CSS 系统相比，链接外部样式还具有巨大的缓存优势，因为浏览器会在页面刷新或重新访问时自然地缓存所有这些内容。自 1990 年代以来，我们一直以这种方式使用 CSS，所以我很困惑为什么 Google 会回到旧的内联样式系统。链接样式仅适用于管理和缓存 css。我们还将版本查询字符串添加到链接的 CSS 文件 (/mystyles.css?v=1.2) 的末尾，以便您可以强制刷新等。再次执行此操作，删除 angular.json 文件中对 CSS 的所有引用并手动添加它们作为 index.html 文件头部的链接。
我确实认为您可以安全地使用 Angular 的模块化或基于组件的样式系统，只要您了解当您延迟加载或预加载 Angular 模块时，这些嵌入式样式元素确实会在每次新访问或刷新时从服务器推送给用户脚本块。还要理解现代浏览器今天的工作方式不是旧浏览器的工作方式.....新浏览器不会在链接的样式之后解析嵌入的样式，而是尊重您将它们插入到 HTML 页面头部的顺序。换句话说，今天，当 Angular 最终交付 HTML 时，您将它们放在页面中的顺序在 Angular 中可能是不可预测的。如今，级联顺序受到 HTML 设计者的严格控制，而不是 W3C 的建议。
我认为这是 Angular 模块化样式系统的主要目的……从设计师手中接管 CSS 控制权，并希望他们不会注意到。但老实说，如果您使用外部表并遵循基本的级联规则，则没有必要。
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 ）
我知道这太晚了,但随着事情不断变化.截至2017年3月16日
这对我来说对cli来说很有用.
<link rel="stylesheet" href="src/styles.css">
还有一种添加外部CSS的解决方案，即，将所有CSS放在资产/ 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",
],
| 归档时间： |
|
| 查看次数： |
59942 次 |
| 最近记录： |