Question

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

Answer 1

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

Answer 2

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

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

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

对于angular-cli.json生成的新项目，您的angular-cli.json看起来应该是这样的：

1.0.0-beta.11-webpack.3

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

2 个答案: