Невозможно использовать относительный путь для styleUrls в Angular

Question

У меня ниже структура файла:

/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?

Answer 1

Создание стекаблица с компонентами блока и подблока, способного использовать одинаковые HTML и SCSS в обоих местах https://stackblitz.com/edit/angular-vkhz8b

Answer 2

Может быть, вы испытываете эту ошибку? https://github.com/angular/angular/issues/4974 В вашем случае решение может состоять в том, чтобы просто удалить строку объявления styleUrls (об этом говорится в комментарии к проблеме).

Answer 3

Возможно, вы захотите убедиться, что ваш baseUrl настроен в вашем tsconfig.json. Возможно, поэтому он не может найти файл.

См .: https://www.typescriptlang.org/docs/handbook/module-resolution.html

Answer 4

Вам не нужно указывать весь URL, так как компонент находится в папке app / components / block, он должен быть просто

styleUrls: ['./block.scss']