Sass 在'；中包含一个非常大的css文件可以吗；风格'；在angular2？

重要的是

样式：[require（'bootstrap.scss'）]

所以bootstrap（css库）相当大，但我想在我的angular2应用程序中使用它，所以我让主要组件封装为none，这样它将与页面共享样式，然后我按照建议包含bootstrap.scss

---

我的问题是：在样式和性能方面，有这么大的字符串（数千行）可以吗？像常规css文件一样将引导放在页面的头部是否更好？

Angular2将提供一个构建步骤（目前仍在进行中），在将应用程序提供给浏览器之前进行此类处理。如果你用这个，那没关系，或者我会尽量避免用这种方式使用大型CSS文件。即使因为您使用的是

ViewEncapsulation.None

到处都是，所以不需要重写，Angular2也可能会解析CSS，这是一项冗余的工作。

我宁愿不内联使用如此大的文件。即使使用

ViewEncapsulation.simulated

或

Native

。我的意思是，这些样式将异步加载，在大多数情况下，您希望在加载页面之前使用css，不是吗？我只会使用组件内联样式来设置特定组件的样式，或者如果您将组件作为第三方组件提供。你用它干什么？对于

仿真的

Angular，有很多重写要做（与构建步骤无关），而对于

原生的

它根本不起作用，因为CSS无法跨越阴影DOM边界。我猜构建步骤将直接将CSS添加到

index.html

，使用

None

和

Emulated

确定这是正确的，但是CSS将在稍后时间添加，而不是在加载脚本之前。

import {Component, ViewEncapsulation} from '@angular/core';
import {Router, RouteConfig, ROUTER_DIRECTIVES} from '@angular/router-deprecated';

import {Home} from './components/home/home';
import {About} from './components/about/about';
import {RepoBrowser} from './components/repo-browser/repo-browser';

@Component({
  selector: 'seed-app',
  providers: [],
  pipes: [],
  directives: [ROUTER_DIRECTIVES],
  styles: [require('bootstrap.scss')],
  encapsulation: ViewEncapsulation.None,
  templateUrl: 'app/seed-app.html',
})
@RouteConfig([
  { path: '/home',       component: Home,        name: 'Home', useAsDefault: true },
  { path: '/about',      component: About,       name: 'About' },
  { path: '/github/...', component: RepoBrowser, name: 'RepoBrowser' },
])
export class SeedApp {

  constructor() {}

}