Question

我使用sass创建了一个全局样式表并将其放在waitReady = function(opt_optStr) { var self = this; var driverWaitIterations = 0; var lastWebdriverError; function throwError() { //STOP EXECUTING!! throw new Error("Expected '" + self.locator().toString() + "' to be present and visible. " + "After " + driverWaitIterations + " driverWaitIterations. " + "Last webdriver error: " + lastWebdriverError); } function isPresentError(err) { lastWebdriverError = (err != null) ? err.toString() : err; //STOP EXECUTING!! return false; } return browser.driver.wait(function() { driverWaitIterations++; if (opt_optStr === 'withRefresh' && driverWaitIterations > 7) { refreshPage(); } return self.isPresent().then(function(present) { if (present) { return self.isDisplayed().then(function(visible) { lastWebdriverError = 'visible:' + visible; return visible; }, isPresentError); } else { lastWebdriverError = 'present:' + present; return false; } }, isPresentError); }, 10000).then(function(waitResult) { if (!waitResult) { throwError(); } return waitResult; }, function(err) { isPresentError(err); throwError(); return false; }); };中。我只指定了背景颜色。

在索引中，我添加了一个链接：public/style/styles.scss

背景颜色对body标签不起作用。检查身体标签后，我可以看到背景颜色已被应用但被<link rel="stylesheet" href="style/styles.css">

推翻

我做错了什么？

提前致谢

Answer 1

从CLI的beta.14版本（使用Angular 2.0 final）开始，可以在{＆＃34;样式＆＃34;下的angular-cli.json内链接全局样式表。键。这是对相对于src/目录的文件的引用，默认情况下为style.css。

利用这种方法，您可以：

将全局样式复制到src/styles.css
使用CSS导入将外部规则导入styles.css
通过apps[0].styles

angular-cli.json

另请参阅angular-cli wiki中的Global Styles。

Answer 2

以上答案均未解释Angular CSS系统中到底发生了什么，或者为什么您会看到级联问题。您可能会考虑将所有CSS移出Angular编译器，并移入自己的外部链接。

在Angular项目中，当您直接将样式路径添加到“ angular.json”（较新）或“ angular-cli.json”（较旧）设置文件中时，Angular会捕获所有这些CSS文件，并将其编译为JavaScript文件，然后将其作为EMBEDDED STYLES嵌入到HTML文件的头部：

此angular.json设置：

  "styles": [
    "src/styles.css",
  ],

在内存中的浏览器DOM中变成嵌入式样式：

<!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中时，也会发生同样的事情。它们被转储到第一个组件下的ANOTHER嵌入式样式元素中。

我不是100％肯定Angular的人会理解他们正在添加这样的嵌入式样式，因为这些样式的级联顺序比“链接”或外部样式高，这可能会引起冲突。因此，使用Angular的这些嵌入式样式系统可以隐藏链接样式中的所有CSS。

更糟糕的是，如果将CSS IMPORT标签放置在“ styles.css”文件中（例如进行引导），则编译器也会抓取这些标签并将其吐出到这些嵌入式样式标签中。传统上，将一个样式表导入另一个样式表用于控制级联顺序，隐藏非常旧的浏览器不支持的样式，以及按功能管理大型样式库。由于Angular现在会忽略所有这些内容，并将所有这些CSS混杂在一起，因此，在“ index.html”文件的开头留有一个巨大的嵌入式内联样式块，它很难控制级联的权重和顺序。

Angular的样式系统也不支持使用此嵌入式系统对网站或主题进行外观设置。就像上面提到的，将样式表放在文件夹结构中并不重要。如果在angular.json中引用了它们，则它们都将被编译成页面顶部的这些嵌入式样式blob。

因此，我建议您从“ ANGULAR.JSON”中删除所有样式引用！然后将它们手动添加回您的“ index.html”中，如下所示：

<link href="styles/styles.css" rel="stylesheet" />

您将必须通过以下方式更改angular.json设置文件：删除样式数组路径列表，然后将其粘贴回资产数组列表，以便Angular知道要迁移到的位置您的CSS文件夹和dist文件夹中的文件。

然后，您可以完全控制网站的样式，跨浏览器修复，皮肤等。现在，您还可以完全控制级联顺序，这对于您要完全控制它至关重要。

链接外部样式也比Google Angular损坏的CSS系统具有巨大的缓存优势，因为浏览器自然会在页面上缓存或刷新所有这些内容。自1990年代以来，我们一直以这种方式使用CSS，因此Im感到困惑，为什么Google会回到旧的内联样式系统。链接样式仅是管理和缓存CSS的上乘之选。我们还将版本查询字符串添加到链接的CSS文件（/mystyles.css?v=1.2）的末尾，以便您可以强制刷新等。再次执行此操作，请删除angular.json文件中所有对CSS的引用并手动添加它们作为index.html文件顶部的链接进入。

我确实认为您可以安全地使用Component样式系统，只要您了解到，当您延迟加载或预加载angular模块时，这些嵌入式样式元素确实会被推送到DOM中，并且可以级联您的墨迹样式。但是我认为这是Angular模块化样式系统的主要目的。但是，老实说，如果您仍然使用外部工作表并遵循基本的级联规则，则不必要。

Answer 3

我知道这太晚了，但随着事情不断变化。截至2017年3月16日

这对我来说对cli来说很有用。

<link rel="stylesheet" href="src/styles.css">

Answer 4

虽然我认为@filoxo's answer是文档化的解决方案，但以下内容对我来说也很有用，并且可能会更清楚地说明哪个组件需要它：

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，因为我得到“一个对象文字在严格模式下不能有多个具有相同名称的属性”和“重复标识符'样式'”。

Answer 5

我遇到了同样的问题，并且在cli中甚至没有sass / less支持之前找到了this example。我想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 });
};

Answer 6

hi in angular 4we可以在 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';

Answer 7

还有一种添加外部CSS的解决方案，即，像这样将所有CSS放在asset / 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",
  ],

Answer 8

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）

Answer 9

将src / styles.css重命名为src / styles.scss

记得将styles.css重命名为.angular-cli.json中的styles.scss。

Answer 10

我一直在使用以下策略（虽然我没有从angular-cli团队那里看到任何官方解决方案，因此可能有更好的方法）：

如果我的所有src文件都在src / app / ...中，我将app.scss文件放在root ./app目录中。然后使用当前的构建配置自动编译为css，因此我可以将其包含在我的index.html中：

<link rel="stylesheet" type="text/css" href="app/app.css">

如果您的文件结构因默认CLI文件结构的原因而异，请确保app.scss文件包含在主应用程序组件所在的同一目录中。我喜欢这种技术，因为这意味着我不必改变构建，这样可以减少将来更新项目的痛苦。

Answer 11

对于应用程序<app-root>（例如<body>）范围之外的元素，可以使用他人提供的解决方案。

如果该元素在您的应用程序内部，则也可以不将其设为全局，而是在字符串中定义样式，然后将其导入到Component类装饰器的styles属性中您要在哪里使用这些样式。

那样，您将获得封装和重复使用。它只是带有一个字符串编写的缺点，这可能会限制您的编辑器对样式进行静态分析的能力。

AFAIK，角度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 { ... }

Answer 12

我将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找到了原因：

仅当我们具有多个非空文件时，才会重现该问题 angular.json的projects.architect.build.options.styles设置。

我的解决方案：从样式数组中删除“ node_modules / bootstrap / dist / css / bootstrap.min.css”条目，将“ src / styles.scss”保留为[]中的唯一文件，然后打开styles.scss，并添加内容顶部的以下行：

@import "node_modules/bootstrap/dist/css/bootstrap.min";

Answer 13

将scss添加到angular-cli.json的样式数组。

angular-cli如何添加全局样式？

13 个答案: