Программно импортировать файл CSS по относительному пути файла ⇐ CSS

[Anonymous]

фон < /h1>
Я провожу устаревшие компоненты React в угловом приложении, используя метод, аналогичный этому. Есть много компонентов реагирования. Все они импортируют свои собственные CSS с импортом модуля JS: < /p>

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

import "./Admin.css";
< /code>
Это означает, что каждый компонент отвечает за импорт своей собственной таблицы стилей, что здорово. Если бы я мог просто заставить компилятора быть довольным этим, как это было в приложении React, это был бы наилучшим возможным результатом. < /P>
 Проблема < /h1>
< P> Проблема в том, что это не работает, когда компонент React находится в угловой. Импорт файла CSS Таким образом, сломает компиляцию: < /p>
X [ERROR] Could not resolve "./Admin.css"

src/app/components/react/Admin/Admin.tsx:3:7:
3 │ import "./Admin.css";
╵        ~~~~~~~~~~~~~
< /code>
Вместо этого я должен использовать импорт CSS, чтобы включить таблицу стилей компонента React в файл .Scss углового хоста: < /p>
// Inside AdminHost.component.scss
@import '../../react/Admin/Admin';
< /code>
Это сопровождается гораздо большей проблемой: теперь, когда каждый компонент реагирования не несет ответственности за свои собственные стили, я должен копать все компоненты Admin.tsx и вручную импортировать все их Стильски, как указано выше. Тогда их дети, и так далее. Даже если компонент является ребенком нескольких родителей, я должен повторять этот процесс каждый раз, если я не запомнил все таблицы стилей, которые ему нужны. В проекте много компонентов, так что это тонна прогулок деревьев. с помощью вспомогательной функции: < /p>
// sanitizer is injected by the Angular host
export function importCss(cssUrl: string, sanitizer: DomSanitizer) {
const head = document.getElementsByTagName('head')[0];
const style = document.createElement('link');
style.rel = 'stylesheet';
style.href = sanitizer.sanitize(SecurityContext.URL, cssUrl);
head.appendChild(style);
}

// inside Admin.tsx:
importCss("path/to/Admin.css");

Вы, возможно, уже заметили проблему: cssurl - это URL, а не относительный путь файла. Это означает, что я больше не могу импортировать »./admin.css" . Я должен использовать URL, а это означает, что Admin.css должен жить в папке статических активов. Я немного исследовал это, прежде чем решить, что это не спасет меня. Всякий раз, когда я приношу компонент React, я использую следующие правила: < /p>

• Стильс -таблица базового компонента React импортируется в угловой хост .Scs. < / / li>
  Каждый компонент React должен иметь файл .scss с тем же именем в одной и той же папке. Стилиты в свои собственные .SCSS. Каждый уровень отвечает за предоставление своих собственных стилей и импорт следующего уровня. Всякий раз, когда я заполняю этот процесс для компонента и всего его потомка, я переименую таблицу стиля в. Таким образом, если какой -то другой компонент включает в себя его в детстве, я знаю, что могу просто импортировать этот лист и не должен копать все его потомки, ищущие стили.

< Br /> Преимущество здесь содержит много повторяющихся усилий. Проблема в том, что он не сэкономит достаточно. Там все еще много боли и ручной одежды. Я надеюсь, что есть лучший способ. < /P>
Идеи < /h1>

• В идеальном мире есть способ сделать Angular's Компилятор распознает импорт "./admin.css" Line и хорошо играет с ним. Все мои попытки сделать это потерпели неудачу. (Я должен сказать, что я просто предполагаю, что это из компилятора Angular, так как он работал в приложении React.) папка активов. Это сделало бы идею из попытки 1 довольно выполнимой. Недостатком является то, что их не так легко найти, когда вы работаете над компонентом, и, поскольку у некоторых есть дублированные имена, правильный способ сделать это - воссоздать ту же структуру папок. Это кажется немного неловким, и это раздвигает границы моих навыков Bash. это в ссылке тег. Тогда попытка 1 будет работать. Я не знаю, как это сделать, хотя.

Подробнее здесь: https://stackoverflow.com/questions/793 ... -file-path