不能在 Angular 中使用 styleUrls 的相对路径答案

【问题标题】：Cannot use relative path for styleUrls in Angular不能在 Angular 中使用 styleUrls 的相对路径
【发布时间】：2019-02-09 19:05:09
【问题描述】：

我有以下文件结构：

/src/
  app/
  components/
    block/
      block.html
      block.scss
      block.ts
      sub-block.ts

子块是继承块组件的组件，共享相同的html文件和scss文件：

@Component({
    selector: 'sub-block',
    templateUrl: 'block.html',
    styleUrls: ['./block.scss'],
})
export class SubBlockComponent extends BlockComponent{...}

当我运行应用程序时，它会报告错误：

 GET http://localhost:8100/block.scss 404 (Not Found)

我试过了

styleUrls: ['block.scss']
styleUrls: ['./block.scss']
styleUrls: ['/src/components/block/bock.scss']
styleUrls: ['src/components/block/bock.scss']
styleUrls: ['../components/block/bock.scss']

全部失败。

我怎样才能让它工作？这与 tsconfig 或 webpack 有关吗？

【问题讨论】：

你试过['block.scss']吗？
@GerryMcBride 是的，我试过了。
我发现：即使没有子块，styleUrls也不起作用。

标签： angular ionic-framework

【解决方案1】：

也许您遇到了这个错误？ https://github.com/angular/angular/issues/4974 在您的情况下，解决方案可能只是删除 styleUrls 声明行（错误问题中的评论暗示了这一点）。

【讨论】：

【解决方案2】：

您可能需要确保在您的tsconfig.json 中配置了您的baseUrl。这可能是它找不到文件的原因。

见：https://www.typescriptlang.org/docs/handbook/module-resolution.html

【讨论】：

我的 tsconfig 是“baseUrl”：“.”

【解决方案3】：

使用块和子块组件创建了一个堆栈闪电战，能够在两个地方使用相同的 HTML 和 SCSS https://stackblitz.com/edit/angular-vkhz8b

【讨论】：

您在 stackblitz 上的示例不起作用。我把block.scss改成任意名字，还是没有报错。