Тильда ~ в операторе SCSS @use больше не разрешается в node_modules с Angular 13

Question

После обновления проекта Angular 12 до Angular 13 я столкнулся с проблемой, когда SCSS больше не мог найти общую таблицу стилей в библиотеке. Похоже, что тильда (~) больше не разрешается в node_modules.

Сломанный: @use '~my-angular-lib' as lib;

Работает: @use '../node_modules/my-angular-lib' as lib;

Я заметил, что материал angular просто напрямую отражает @angular/ material в Angular 13, но я не могу понять, как заставить его работать с моей библиотекой. Кажется хакерским каждый раз использовать относительный путь к mode_modules.

Какой в ​​настоящее время лучший метод изменения таблицы стилей в node_modules или что мне не хватает там, где ~ больше не указывает на node_modules?

Answer 1

Я столкнулся с той же проблемой и нашел решение:

1. Откройте файл angular.json;

2. В каждом наборе конфигурации приложения:

            "stylePreprocessorOptions": {
      "includePaths": [
        "./node_modules"
      ]
    }  
   

3. удалить ~ при каждом импорте;

Answer 2

Angular не рекомендует использовать ~для Сасса @useа также @importзаявления на некоторое время.

Официально, начиная с версии 13 Angular, использование импорта тильды больше не поддерживается .

Answer 3

Использовать @use 'my-angular-lib' as lib;вам нужно обязательно экспортировать соответствующие файлы в ваши библиотеки angular package.jsonа также ng-package.jsonфайлы (см. https://github.com/ng-packagr/ng-packagr/blob/master/docs/copy-assets.md).

Вот моя конфигурация, например:

      // package.json
  ...,
  "exports": {
    ".": {
      "sass": "./src/lib/_index.scss"
    }
  },
  ...
// ng-package.json
  ...,
  "assets": [
    "./src/lib/_index.scss",
    "./**/*-theme.scss"
  ],
  ...

Все файлы компонентов, связанные с моей темой, имеют суффикс -themeи у меня есть один файл scss ( _index.scss), который содержит только один @mixinк @includeстили компонентов, специфичные для темы. Например:

      // src/lib/_index.scss
@use './some/some-component-theme' as *;
@mixin lib-theme($theme) {
  @include some-component-theme($theme);
}

Подсказка : иногда мне приходилось вручную удалять .angular/cacheпапка при работе с локальными библиотеками. Так что попробуйте это, если что-то странное произойдет в процессе сборки.

Answer 4

Просто опустите ~ в операторе импорта. Оно работает!!

Разрешение импортных правил — ссылки

Webpack предоставляет расширенный механизм разрешения файлов.

Sass-loader использует специальную функцию импорта Sass для передачи всех запросов в механизм разрешения Webpack. Таким образом, вы можете импортировать свои модули Sass из node_modules.

      @import "bootstrap";

Использование ~ устарело и может быть удалено из вашего кода (мы рекомендуем это), но мы по-прежнему поддерживаем его по историческим причинам. Почему вы можете удалить его? Загрузчик сначала попытается разрешить @import как относительный путь. Если его невозможно разрешить, загрузчик попытается разрешить @import внутри node_modules.

Добавление ~ к пути к модулю указывает веб-пакету выполнить поиск по node_modules.

      @import "~bootstrap";

Важно добавить перед ним только ~, потому что ~/ разрешается в домашний каталог. Webpack необходимо различать начальную загрузку и ~bootstrap, поскольку файлы CSS и Sass не имеют специального синтаксиса для импорта относительных файлов. Написание @import "style.scss" аналогично @import "./style.scss";