如何包含和引用特定于模块的CSS文件？

我正在尝试将ngx加载条（）插入我的angular2/4-app。我按照给出的所有说明操作，加载条实际上似乎在那里，但问题似乎是应用程序找不到loading-bar.css文件。我怎么称呼它

样式URL不起作用。该文件与app.ts位于同一级别/同一文件夹中

提前谢谢

从“@angular/core”导入{Component}；
@组成部分({
选择器：“a-CONTAINER”，
模板：`
`,
styleUrls:[`loading bar.css`]
})

/*让点击通过*/
#加载杆，
#加载杆旋转器{
指针事件：无；
-webkit指针事件：无；
-webkit转换：350ms线性所有；
-moz转换：350ms线性全；
-o-过渡：350ms线性所有；
过渡：350ms线性所有；
}
#加载杆，加载杆{
-webkit过渡：宽度350ms；
-moz跃迁：宽度350ms；
-o型过渡：宽度350ms；
过渡：宽度350ms；
背景：#29d；
位置：固定；
z指数：10002；
排名：0；
左：0；
宽度：100%；
高度：2倍；
边框右下半径：1px；
边框右上角半径：1px；
}
/*花式模糊效果*/
#加载杆{
位置：绝对位置；
宽度：70px；
右：0；
排名：0；
高度：2倍；
不透明度：.45；
-莫兹盒阴影：#29d 1px 0 6px 1px；
-ms盒阴影：#29d 1px 0 6px 1px；
-webkit盒阴影：#29d 1px 0 6px 1px；
盒影：#29d 1px 0 6px 1px；
-moz边界半径：100%；
-webkit边界半径：100%；
边界半径：100%；
}
#加载杆旋转器{
显示：块；
位置：固定；
z指数：10002；
顶部：10px；
左：10px；
}
#加载栏微调器。微调器图标{
宽度：14px；
高度：14px；
边框：实心2px透明；
边框顶部颜色：#29d；
左边框颜色：#29d；
边界半径：50%；
-webkit动画：加载条微调器400ms线性无限；
-moz动画：加载条微调器400ms线性无限；
-ms动画：加载条微调器400ms线性无限；
-o动画：加载条微调器400ms线性无限；
动画：加载条微调器400ms线性无限；
}
@-webkit关键帧加载栏微调器{
0%{-webkit变换：旋转（0度）；变换：旋转（0度）；}
100%{-webkit变换：旋转（360度）；变换：旋转（360度）；}
}
@-moz关键帧加载条微调器{
0%{-moz变换：旋转（0度）；变换：旋转（0度）；}
100%{moz变换：旋转（360度）；变换：旋转（360度）；}
}
@-o关键帧加载条微调器{
0%{-o变换：旋转（0度）；变换：旋转（0度）；}
100%{-o变换：旋转（360度）；变换：旋转（360度）；}
}
@-ms关键帧加载条微调器{
0%{-ms变换：旋转（0度）；变换：旋转（0度）；}
100%{-ms变换：旋转（360度）；变换：旋转（360度）；}
}
@关键帧加载栏微调器{
0%{变换：旋转（0度）；}
100%{变换：旋转（360度）；}
}

由于您使用的是styleUrls属性，因此需要在中指定正确的路径作为值。我猜问题在于加载bar.css的路径不正确

通常，这应该是相对于当前文件的路径，因此您可能希望添加如下内容：

styleUrls: [`./loading-bar.css`]

---

请参阅。

由于您使用的是styleUrls属性，因此需要在中指定正确的路径作为值。我猜问题在于加载bar.css的路径不正确

通常，这应该是相对于当前文件的路径，因此您可能希望添加如下内容：

styleUrls: [`./loading-bar.css`]

看