angular - 无法从组件中的资源加载 CSS

Question

我是 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

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

Answer 1

styleUrls 中的绝对路径并不简单，如文档所述 here .

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

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

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