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

Question

我想将一些全局样式应用到我的网站（正文、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）

Answer 1

目前正在设计中，将在最终版本发布前实施。一般的想法是提供对样式文件的引用 (CSS/SCSS/LESS...) 并将其包含在应用程序中。

Answer 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"
      }
    }
  ],

Answer 3

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

注意：如果升级后运行ning 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": "+"
  }
}

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

How do I add global styles without requiring an extra component?

css

angular

angular-cli