使用 styleUrls 在 AngularJS2 中导入样式答案

【问题标题】：Importing style in AngularJS2 using styleUrls使用 styleUrls 在 AngularJS2 中导入样式
【发布时间】：2017-08-17 15:47:34
【问题描述】：

当我在 Angularjs2 中的 index.html 文件中使用样式链接时，界面运行良好：

<link rel="stylesheet" type="text/css" href="src/path/to/css/global.css"  />

但是，当我删除该行并将样式直接包含在组件的“styleUrls”部分中时，如下所示，它不起作用：

    @Component({
       selector: 'app-d3',
       templateUrl: './my.component.html',
       styleUrls: [
              'src/path/to/css/global.css',
       ]
    });

我可以看到样式已经导入页面（使用样式标签），但程序无法读取它。我有几个 css 文件，我想以这种方式包含它们。有什么想法吗？

【问题讨论】：

尝试使用'./src/path/to/css/global.css
@Malwaregeek 我试过了，但没用。
您的 css 文件夹是否与您的 html 文件夹处于同一级别？在这种情况下，只需尝试./global.css，但最终我们需要查看您的文件夹结构
@Bean0341 css 文件位于 /src/app/myComponent/css 中。从上述两种方法中，程序都可以看到 css 文件夹，除非它引发错误。
现在你的 html 的确切路径是什么？

标签： css angular styles

【解决方案1】：

从路径中删除“src”。使用 styleUrls：['app/myComponent/css/global.css']

【讨论】：

【解决方案2】：

如果您使用的是 Webpack，您可能会错过 angular2-template-loader。像这样的：

{ test: /\.ts$/, use: [ 'awesome-typescript-loader', 'angular2-template-loader' ] },

【讨论】：

【解决方案3】：

styleUrls 路径相对于您的组件 ts 文件。我认为您需要上一些文件夹。比如：

styleUrls: [ '../../css/global.css

【讨论】：

组件文件夹有一个名为css的文件夹。所以，我应该是这样的——> 'css/global.css' 或 './css/global.css'。反正我上去也没用。
好的，由于我没有关于您的项目的足够信息，我不确定如何为您提供帮助。我在 GitHub 上有一个 Angular2-starter-kit 项目，我正在使用 stylesUrl。你可以看看那个并找出你的问题在哪里。 github.com/andreasonny83/angular2-sonny-webpack/blob/master/src/…
否则，如果您的项目托管在 Github 上，只需发布链接，我会为您提供帮助。
另外，请查看官方文档：angular.io/docs/ts/latest/guide/…
还没有上传到 Github。我不认为这真的取决于我的项目结构。正如我所提到的，这些项目正在使用链接标签，它也遵循相对路径。