Angular 2 - 全局CSS文件

Question

是否可以向Angular 2添加全局CSS文件？目前,我有许多具有相同按钮样式的不同组件 - 但每个组件都有自己的CSS文件和样式.这对变化感到沮丧.

我在Stack Overflow上的某个地方读到了:

import { ViewEncapsulation } from '@angular/core'; //add this

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None            //add this
})

所以我在根组件中添加了ViewEncapsulation行,然后将CSS样式添加到根应用程序CSS(app.component.css)并从单个组件CSS文件中删除了CSS样式,并且它不起作用.

当然有一种方法可以添加全局CSS文件？我是否需要向各个组件添加内容以使其访问全局CSS文件？

Answer 1

只需在src/styles.css文件中编写全局样式即可.styles.bundle.js您运行时将添加该文件ng build.

如果您想添加更多样式文件,可以在您的.angular-cli.json(或angular.jsonAngular 6+)文件中添加.在该文件中,您将看到一个名为的数组styles,默认情况下是一个项目styles.css(或src/styles.css在Angular 6中).你甚至可以包含.scss文件.

使用SCSS

如果您想使用SCSS,只需将src/styles.css文件的扩展名更改为.scss,然后通过编辑数组中的条目来反映您.angular-cli.json(或angular.json6+)文件中的更改styles.

使Angular默认使用SCSS

在创建组件时,您希望Angular创建.scss样式文件而不是.css.这是如何做:

Angular 7

从Angular 7开始,当您使用创建应用程序时ng new appname,系统将提示您要使用哪种样式表格式,因此您只需选择SCSS(源代码).似乎这里结束了手动配置Angular以使用SCSS的需要.

Angular 6

在angular.json文件的末尾添加它(源代码):

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
}

角4和更低

在.angular-cli.json文件末尾找到它,并将值更改styleExt为scss:

"defaults": {
  "styleExt": "css",
  "component": {}
}

Answer 2

您只需在主html文件中导入css即可.