如何在不需要额外组件的情况下添加全局样式？答案

【问题标题】：How do I add global styles without requiring an extra component?如何在不需要额外组件的情况下添加全局样式？
【发布时间】：2016-12-20 07:30:15
【问题描述】：

我想为我的网站应用一些全局样式（body、h1、h2、h3 等）。

要使用 Angular2 执行此操作，需要设置组件的 view encapsultation：encapsulation: ViewEncapsulation.None。

示例：

@Component({
  selector: 'app-root',
  templateUrl: template(),
  styleUrls: ['global.scss', 'app.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class AppComponent {
  title = 'Hello world!';
}

问题是这个封装规则适用于所有这个组件样式表，这意味着我必须有一个单独的组件只用于全局样式。

是否有另一种方法可以做到这一点而不需要额外的组件并且不需要编辑 Angular-CLI 的构建配置？

（我正在使用angular/core 2.0.0-rc.5 和angular-cli 1.0.0-beta.11-webpack.2）

【问题讨论】：

为什么不在 index.html 中添加一个全局样式表？我的意思是，风格的东西很好而且有光泽，但你必须使用它并没有什么特别的。
因为 Angular-CLI 没有检测到这一点，因此不会将其包含在构建中。除非我弄错了，否则所有资源都必须在脚本中导入或引用。

标签： css angular angular-cli

【解决方案1】：

drbishop提到的PR已经合并发布为1.0.0-beta.11-webpack.3。

要从 1.0.0-beta.11-webpack.2 升级到 1.0.0-beta.11-webpack.3，请运行：

npm uninstall -g angular-cli
npm cache clean
npm install -g angular-cli@1.0.0-beta.11-webpack.3

注意：如果您在升级后运行ng version 时遇到SyntaxError: Unexpected token ... 错误，您可能需要升级到Node.js 6。有关详细信息，请参阅https://github.com/angular/angular-cli/issues/1883。

如果您使用1.0.0-beta.11-webpack.3 生成新项目，您可以将styles.css 文件添加到您的src 目录中，该目录将自动包含在您的构建中。您还可以将外部 CSS 导入添加到 angular-cli.json 的 apps[0].styles 属性。

对于由1.0.0-beta.11-webpack.3 生成的新项目，您的angular-cli.json 应该如下所示：

{
  "project": {
    "version": "1.0.0-beta.11-webpack.3",
    "name": "demo"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": "assets",
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environments": {
        "source": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",
        "dev": "environments/environment.dev.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "lazyRoutePrefix": "+"
  }
}

【讨论】：

请注意，截至本评论发布之日，1.0.0-beta.11-webpack.8 是当前版本。

【解决方案2】：

如前所述，它正在为未来的版本实施。已经有一个pull request 来解决这个问题。您现在可以手动更新它作为一种解决方法。

然后，更新您的angular-cli.json 文件：

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": "assets",
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "mobile": false,
      "additionalEntries": [
        { "input": "polyfills.ts", "output": "polyfills.js" },
        "styles.sass"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",
        "dev": "environments/environment.dev.ts"
      }
    }
  ],

【讨论】：

【解决方案3】：

目前正在设计中，并将在最终版本之前实施。总体思路是提供对样式文件 (CSS/SCSS/LESS...) 的引用并将其包含在应用程序中。

【讨论】：