无法从组件中的资产加载 css答案

【问题标题】：Cannot load css from assets in component无法从组件中的资产加载 css
【发布时间】：2019-04-15 04:10:24
【问题描述】：

我是 Angular 6 的新手，正在尝试在特定组件中使用我的 css 文件。

我的 angular.json 文件是这样说的：

"angapp": {
  "root": "",
  "sourceRoot": "src",
  ....

我的 css 文件放在 src/assets/css 目录下。我在

中有一个名为 dashboard.component.ts 的组件

src/app/components/secure/dasbhoard

我正在尝试通过以下方式包含文件 src/assets/css/sidebar-nav.min.css 但无法：

@Component({
  selector: 'dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['src/assets/css/sidebar-nav.min.css']
})

或

@Component({
  selector: 'dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['/src/assets/css/sidebar-nav.min.css']
})

或

@Component({
  selector: 'dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['/assets/css/sidebar-nav.min.css']
})

或

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

并尝试在dashboard.component.css 中导入css

@import '/src/assets/css/sidebar-nav.min.css';

以上都不起作用。我得到了错误：

Module not found: Error: Can't resolve './src/assets/css/sidebar-nav.min.css'

该文件确实存在于：..../src/app/components/secure/dashboard

我想我缺少根目录的路径。

【问题讨论】：

【解决方案1】：

在这个帖子中找到了答案：

像这样导入的css：

~~@import url('src/assets/css/sidebar-nav.min.css');~~

url() 不是必须的，实际语句应该是：

@import 'src/assets/css/sidebar-nav.min.css';

【讨论】：

我认为不需要。我的项目中没有使用url()，它运行良好。
是的，谢谢 Mic，url 不是必需的，但看起来样式没有被应用:(
看起来很奇怪。尝试在 css 中做语法错误，看看浏览器和编译器会发生什么。此外，在浏览器中查找样式以查看它们出现的位置。它们很可能在那里，但 HTML 中的某些内容可能会阻止它们被应用。

【解决方案2】：

styleUrls 中的绝对路径并非微不足道，正如 here 所记录的那样。

您仍然可以使用相对路径：../../../etc。

在你的 scss 中使用@import 确实是另一种解决方案，你可以使用：

@import 'src/assets/css/sidebar-nav.min.css';

【讨论】：