Как мне объявить / включить импортированную папку scss в мою библиотеку, чтобы я мог вызвать @import ее в файлах scss моего приложения?

Aug 17 2020

Цель:

Я пытаюсь включить путь из моей библиотеки, чтобы я мог использовать @importоператор для включения файлов scss в свое приложение, например:

@import "some-scss-in-my-lib"

Проблема:

К сожалению, каждый раз, когда я пытаюсь обслужить свое приложение, я получаю следующую ошибку компилятора:

SassError: Can't find stylesheet to import.

Что я уже пробовал:

  • Поиск в Stackoverflow принес мне эту ветку, в которой описывается та же проблема, с которой я столкнулся сейчас. И я попытался включить путь в styleIncludePathsсвойство так же, как предложил Зайну, но, пытаясь обслужить приложение, я столкнулся с точной проблемой, как описано в разделе «Проблема» выше.

  • Я попытался установить такое stylePreprocessorOptionsсвойство, как GreatHawkeye, в первом сообщении, и это стало возможным для @importфайла scss после использования ng build, но я не могу понять, как и почему это работает, stylePreprocessorOptionsно нет styleIncludePaths?

  • Я также попытался выполнить поиск в Google, что привело меня к теме « Невозможно получить стили, объединенные с использованием параметра styleIncludePaths», где я нашел ответ Алана Агуиса , но, к сожалению, не было реального объяснения, для чего действительно нужен styleIncludePaths. Единственное, что сказал Алан Агуис :

это потому, что styleIncludePaths имеет отступ для чего-то другого.

Но, как уже было сказано, он не сказал, что такое styleIncludePaths, что еще больше смутило меня.

Я также попытался для поиска на GitHub страницы нг-packagr относительно документации о Придайте Включите Дорожки на тему Как использовать «styleIncludePaths» , но результат был все тот же , и я не мог найти четкий ответ на мою проблему.

Вопросы по этой проблеме:

  1. Когда используется styleIncludePaths в ng-package.json? Он используется только для опубликованных пакетов?

  2. Когда используется stylePreprocessorOptions в angular.json? Используется ли он для версии dist только после запуска ng build?

  3. В чем вообще разница между styleIncludePaths из ng-package.json и stylePreprocessorOptions из angular.json?

  4. Как мне объявить / включить импортированную папку scss в мою библиотеку, чтобы я мог вызвать @import ее в файлах scss моего приложения?

Я почти уверен, что ошибаюсь в своих предложениях, но хотел бы знать, что происходит и как решить мою проблему.

Любая помощь в этом, как всегда, приветствуется! 🙏🏻

Ответы

2 FyZ1K Aug 24 2020 at 19:30

Как ответил на github , я цитирую alan-agius4 :

Пути включения используются процессорами CSS во время сборки библиотеки для разрешения импорта при обработке файлов scss / less / stylus. В ваших необработанных файлах scss эти пути должны быть включены на уровне приложения, а не на уровне библиотеки, потому что такие файлы будут обрабатываться не конвейером сборки библиотеки, а приложением. Они просто копируются как статические файлы. Если вы не хотите включать такие пути на уровне приложения, вы можете использовать синтаксис импорта тильды в webpack ex:

@import "~/my-lib/scss/mixins”.

Примечание: специфические функции webpack официально не поддерживаются командой разработчиков Angular и могут выйти из строя без предупреждения.