在angular4中导入样式表

Question

尝试将我的项目从角度JS升级到角度4.我有一个样式表，我在角度JS项目中使用过。

这是我的文件夹结构

我使用angular 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 包含组件FooComponent的CSS。

看看这里：

• Component Styles
• Global styles

Answer 2

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

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

OR

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

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

这样您还可以添加CSS文件的CDN链接，这些链接无法在angular-cli.json文件中完成。您可以在此link找到更详细的解释。< / p>