Как мне ссылаться на разные файлы для разных устройств с помощью Angular? ⇐ CSS

[Anonymous]

Такова структура моего проекта в версии 18.2.8.
введите здесь описание изображения
Это структура, если я смотрю на компьютере:
введите здесь описание изображения
Я хочу показать CSS-файл в зависимости от того, с чем вы вошли в систему. Но я не совсем уверен, как мне следует ссылаться на файлы CSS в проекте angular. Я не хотел использовать медиа-запросы, потому что не хочу, чтобы мое приложение показывалось на компьютере, как если бы это был телефон, всякий раз, когда я делаю окно очень маленьким, поэтому я попытался сделать это с помощью userAgent, чтобы проверить, просматривают ли его. с телефоном или настольным компьютером.
Сейчас я в большом замешательстве, потому что, когда я компилирую код на веб-сайт, мой файл style.css объединяется с обоими другими файлами CSS, как если бы я должен был сделать @include.
Веб-сайт также создает еще одну «копию?» из файла Desktop.css (когда я просматриваю рабочий стол) и помещает его на тот же уровень, что и Styles.css, поэтому, если у меня есть несколько переменных с одинаковыми именами, он сначала использует этот файл, и это нормально. Но если у меня есть переменная в mobile.css, а не в Desktop.css, она отображается в обоих случаях, поскольку объединяется в Styles.css.
Что мне делать?
В некотором контексте это то, что находится в моем AppComponent:
Это работает так, как должно.

Код: Выделить всё

constructor() {
const userAgent = navigator.userAgent.toLowerCase();

if (/mobile/i.test(userAgent)) {
this.device = "mobile";
} else {
this.device = "desktop";
}

this.loadStylesheet();
}

loadStylesheet() {
const head = document.getElementsByTagName('head')[0];

// Create a new link element
const linkElement = document.createElement('link');
linkElement.rel = 'stylesheet';
linkElement.type = 'text/css';
linkElement.href = this.device === 'mobile'
? 'mobile.css'
: 'desktop.css';

// Append the link element to the head
head.appendChild(linkElement);
}

Я пытался добавить подобные CSS-файлы в свой angular.json:

Код: Выделить всё

"styles": [
"src/styles.css",
"src/app/styles/desktop.css",
"src/app/styles/mobile.css"
]

Я ожидал, что файлы останутся такими, какие они есть, и будут отображаться только тогда, когда я нахожусь на компьютере или телефоне, как и должно быть. Но на самом деле произошло то, что я описал ранее: он автоматически создает файл CSS, а также объединяет все CSS в Styles.css.
Кроме того, вначале я просто удалил style.css и удалил его из angular.json, но он все равно был создан. Несмотря на это, я хочу сохранить файл, но считаю, что на это стоит обратить внимание.

Подробнее здесь: https://stackoverflow.com/questions/792 ... ng-angular