Angular 10 — динамически загружать определенный файл less условно

#angular #webpack #less

#angular #webpack #Меньше

Вопрос:

Я использую формат таблицы стилей Less в своем проекте Angular (10.0.11).

Я имею дело с тематизацией с использованием нескольких файлов less (более 50 тем), и этот файл может быть идентифицирован только после вызова некоторых начальных API, поэтому я не могу использовать его напрямую в styles.less.

Предположим, что assets/theme1.less соответствует THEME_1, а assets/theme2.less соответствует THEME_2 и так далее.Приложение вызывает начальные API-интерфейсы и сообщает пользовательскому интерфейсу, что должна использоваться ТЕМА 2.

Не могли бы вы, пожалуйста, объяснить способ глобальной динамической загрузки файла less (assets / theme2.less в приведенном выше случае)?

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

1. У Angular есть документация по замене тем во время выполнения здесь . разве эти подходы не сработали для вашего текущего варианта использования?

2. Привет @Edward, это для замены файла CSS. В моем случае я использую МЕНЬШЕ файлов, и если я добавляю это в документ, я должен осел less.js и это будет вне процесса компиляции angualr cli.

Ответ №1:

Лучший способ решить эту проблему — скомпилировать файл темы в другом проекте и внедрить скомпилированный css-файл темы после вызовов API. Просто используйте единую тему по умолчанию для целей разработки.

Вы можете сгенерировать каждый файл темы с другим путем на основе имени темы, к которой вы хотите получить доступ.

Пример: {static-content-path}/{themename}.min.css