Angular CLI将所有组件样式放入文档的开头

Question

页面组件的所有css都将插入到文档的开头。

是否有一种方法可以将所有这些样式捆绑到一个单独的文件中，然后在文档的开头引用该文件？类似于引导程序和任何其他外部CSS库的处理方式。

Answer 1

我认为你不能。使用通用角度时，文档内CSS样式会自动插入到头部，从而加快页面显示。根据我的理解，仅是显示页面组件呈现状态时所需的css，而不是包括的所有CSS。

仅具有指向CSS文件的链接，这会导致在显示页面之前发送额外的请求，并且速度会变慢。

在这里https://github.com/angular/universal/issues/868

  

您认为该样式应该去哪里？请记住，SSR的重点是尽快提供服务器生成的输出，并且使用外部样式表会大大延迟此过程。

Answer 2

将所有CSS文件添加到/ src文件夹中的styles.css中，例如：

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');
@import 'css/exampleStyle.css';

然后在您的angular.json文件中添加styles.css：

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

通常默认情况下完成。

或者您可以直接在angular.json中提到css文件：

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

在* .component.css文件中添加单个CSS元素