Блог

Главная - Вопросы по программированию - Проблема Angular 10 с относительными путями

Проблема Angular 10 с относительными путями

#angular

#angular

Вопрос:

Я обновил свой проект angular с 9 до 10. Однако у меня проблема с внешним scss, который я использую в angular.json, т.Е.

Чтобы воспроизвести ее, я попытался сделать это в совершенно новом проекте, и, похоже, у меня такая же проблема:

  1. ng новый angular10

  2. npm устанавливает roboto-fontface

  3. добавить в angular.json

    «build»: { «builder»: «@angular-devkit/build-angular:browser», «options»: { «styles»: [ «node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss», «src/styles.scss» ], … }, }

  4. новая сборка

Я получаю следующую ошибку:

 ERROR in ./node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref--13-3!./node_modules/s
ass-loader/dist/cjs.js??ref--13-4!./node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss)
Module Error (from ./node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError: C:UsersP70363MyProjectsmixins.scss:17:8: Can't resolve '../../../../../fonts/roboto/Roboto-Black.woff' in 'C:UsersP70363MyProjectsdeletemeangular10node_module
sroboto-fontfacecssrobotosass'

  15 |     @font-face {
  16 |         font-family: '#{$variant}-#{$type}';
> 17 |         src: url('#{$font-full-path}-#{$type}.woff2') format('woff2'),
     |        ^
  18 |              url('#{$font-full-path}-#{$type}.woff') format('woff');
  19 |     }

В качестве обходного пути я сделал следующее:

 "build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "styles": [
      "src/add-roboto.scss",
      "src/styles.scss"
    ],
    ...
  },
}

где roboto.scss находится:

 $roboto-font-path: '../fonts' !default;
@import 'node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss';

что хорошо работает. Идея пришла, когда я зашел в mixins.scss в node_modules/roboto-fontface /css/mixins.scss, и я увидел, что $roboto-font-path: ‘../../../шрифты’ !по умолчанию;

Однако я не могу понять, почему это работает в angular<10, но не angular> = 10

Спасибо

Комментарии:

1. Привет, я думаю, что ваш пакет не обновлен для angular 10. Вам лучше загрузить и поместить свои шрифты в папку assets, как предложено в одном из ответов. Вот ваша проблема GitHub

2. Я думаю, для этого нужно больше голосов. Я только что обновился с 9 до 11 и столкнулся с точно такой же проблемой. Интересно, есть ли правильный способ справиться с этим.

3. У меня такая же проблема, я обновляю свой node.js версия до 15 и angular до 11 с 9. это будет решено, надеюсь, это может вам помочь.

Ответ №1:

Другой способ перезаписать значение по умолчанию ‘$roboto-font-path’ — это использование «@use ‘…’ with (..)» — см. Веб-сайт sass о переменных.

При переходе с angular 9 на angular 10 я обновил все scss @imports в моем текущем приложении до «нового» синтаксиса, используя @use (как ИМХО, именно так рекомендует sass на данный момент).

Итак, мой импорт roboto теперь выглядит так:

 @use 'roboto-fontface/css/roboto/sass/roboto-fontface' with (
  $roboto-font-path: '~roboto-fontface/fonts'
);