在angular4中导入样式表

Question

我正在尝试将我的项目从角度JS升级到角度4.我有样式表,我已经在角度JS项目中使用.

这是我的文件夹结构

我使用角度CLI创建了组件.一切都很完美,但我不知道如何在角4项目中使用我的风格.有人可以解释我如何在全球范围内使用我的风格吗？而且只在某些组件中？

Answer 1

您可以在以下内容中添加样式 angular-cli.json:

"styles": [
  // Your styles go here
]

这适用于全球风格.本地样式(对于某个组件)位于一致的CSS文件中,该文件属于您的组件,例如foo.component.css.默认情况下,每个组件都有以下注释:

@Component({
  selector: 'app-foo',
  templateUrl: './foo.component.html',
  styleUrls: ['./foo.component.css'],
})

因此,foo.component.css包含组件的CSS FooComponent.

看看这里:

• 组件样式
• 全球风格

Answer 2

除了如@pzaenger所示将css文件添加到angular-cli.json之外,您还可以将其添加到应用的index.html页面,如下所示: -

<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />

要么

您甚至可以通过在该文件顶部添加@import语句将其导入应用程序中的现有CSS文件,如下所示: -

@import "~bootstrap/dist/css/bootstrap.min.css";

这样您还可以添加CSS文件的CDN链接,这些链接无法在angular-cli.json文件中完成.您可以在此链接中找到更详细的说明.