CSS 在 angular4 中导入样式表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46363468/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Importing style sheets in angular4
提问by vivek v
Am trying upgrade my project from angular JS to angular 4. I have style sheets which i have used in angular JS project.
我正在尝试将我的项目从 angular JS 升级到 angular 4。我有我在 angular JS 项目中使用的样式表。
This is my folder structure
这是我的文件夹结构
I created components using angular CLI. Everything works perfect but i don't know how to use my styles in angular 4 project. Can some one explain how i can use my styles globally? and also only in certain components?
我使用 angular CLI 创建了组件。一切正常，但我不知道如何在 angular 4 项目中使用我的样式。有人可以解释我如何在全球范围内使用我的样式吗？并且也仅在某些组件中？
回答by pzaenger
You can add your styles within the angular-cli.json:
您可以在以下内容中添加您的样式 angular-cli.json：
"styles": [
// Your styles go here
]
This is for global styles. Local styles (for a certain component) are within the accordant CSS-file, which belongs to your component, e.g. foo.component.css. By default each component has the following annotation:
这适用于全局样式。本地样式（对于某个组件）位于一致的 CSS 文件中，该文件属于您的组件，例如foo.component.css。默认情况下，每个组件都有以下注释：
@Component({
selector: 'app-foo',
templateUrl: './foo.component.html',
styleUrls: ['./foo.component.css'],
})
So, foo.component.csscontains the CSS for the component FooComponent.
因此，foo.component.css包含组件的 CSS FooComponent。
Take a look here:
看看这里：
回答by yatharth varshney
Apart from adding the css file to angular-cli.json as shown by @pzaenger you can also add it to index.html page of your app as shown below :-
除了如@pzaenger 所示将 css 文件添加到 angular-cli.json 之外，您还可以将其添加到应用程序的 index.html 页面，如下所示：-
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
OR
或者
you can even import it into an existing CSS file in your app by adding the @import statement at the top of that file as shown below :-
您甚至可以通过在该文件的顶部添加 @import 语句将其导入到应用程序中现有的 CSS 文件中，如下所示：-
@import "~bootstrap/dist/css/bootstrap.min.css";
This way you can also add CDN links of the CSS file which cannot be done in angular-cli.json file.You can find a more elaborated explanation at this link.
通过这种方式，您还可以添加 angular-cli.json 文件中无法完成的 CSS 文件的 CDN 链接。您可以在此链接中找到更详细的解释。
