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

Posted 2023-02-23

【中文标题】无法从组件中的资产加载 css

【英文标题】：Cannot load css from assets in component

【发布时间】：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】：

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

Angular 6 - How to apply external css stylesheet (leaflet) at component level?

像这样导入的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';