Установить путь scss, используя псевдоним в проекте библиотеки angular-cli

Question

Я создаю проект библиотеки, используя angular-cli.Следуя инструкциям из angular docs , я получаю одну папку ./root/src/app, в которую можно поместить тестовое приложение, демонстрирующее возможности моей библиотеки, и одну папку ./root/projects/library-name, содержащую функциональные возможности моей библиотеки..

Теперь, если я в своем ./root/src/app хочу импортировать модули / компоненты / классы и т. Д., Angular-cli уже настроил мой tsconfig.json для меня с конфигурацией путей ключ / значение.

{
  "compilerOptions": {
    "paths": {
      "my-library/*": [
        "dist/my-library/*"
      ]
    }
  }
}

Это будет для всех целей, касающихся нашей ./root/src/app, имитировать нашу библиотеку, устанавливаемую как node_module.

Таким образом, даже если библиотека построена на ./root/dist/library-name, в моем тестовом приложении прекрасно работает следующее:

import { MyLibraryModule } from 'library-name';

Проблема

SCSSне соответствует тем же правилам, которые описаны в tsconfig.json.Если моя библиотека содержит некоторые scss, которые я хочу сделать доступными для потребителей моей библиотеки, я могу это сделать.Каждый, кто устанавливает мою библиотеку, может получить доступ к моему scss через

@import '~library-name/scss';

, но мое тестовое приложение не может.

Вопрос

Как настроить препроцессор scssКонфиг в angular.json таким образом, что он подражает тому, что angular-cli сделал с моим tsconfig.json, но для scss?Другими словами;Как я могу настроить angular-cli для установки псевдонима каталога для вывода моей сборки библиотеки?

EDIT Просто чтобы уточнить, что мой scss доступен после публикации библиотеки.Нет проблем, когда он потребляется другими приложениями.Моя проблема связана с публикацией scss внутри моего ./root/src/app тестового приложения.

Answer 1

У меня была такая же проблема с моим собственным проектом.Я хотел экспортировать некоторые файлы scss вдоль моей библиотеки, что-то вроде папки тем углового материала.Я нашел, что использование библиотеки scss-bundle является хорошим решением, потому что, по-видимому, нет никаких способов сделать это, используя угловую переменную.

Использование scss-bundle довольно просто.Вам нужен файл конфигурации, например:

{
    "entry": "src/lib/themes/_core.scss",
    "dest": "dist/themes/_theme.scss"
}

, и запускайте эту команду каждый раз, когда вы создаете свою библиотеку: scss-bundle -c ./scss-bundle.config.json

, а вот github repo в случае, если у вас другие потребности

ОБНОВЛЕНИЕ: изменение конфигурации загрузчика sass, чтобы вы могли легче импортировать файлы scss в проекте приложения

Если вы хотите импортировать партиалы scss по мере необходимостисделать из node_modules вам нужно изменить конфигурации webpack и sass-loader.Конфигурация WEbpack по умолчанию скрыта в угловом коде, в зависимости от вашей версии Cli, у вас есть способы ее изменения.

1.x Вам необходимо использовать ng eject, чтобы «извлечь» конфигурацию webpackфайл. Официальные документы для этого

6.x В Cli v6 ng eject временно отключен, НО еще есть способ обойти это, вы можете найтихорошо написанное руководство по этому вопросу здесь

и после всего этого вам нужно настроить sass-loader, чтобы рассматривать ваш проект lib как корневой путь, ответ на который вы можете найти здесь