Насколько мне известно, нет возможности использовать {% include%} в динамическом JS-файле для включения стилей. Но я не хочу, чтобы мне приходилось снова обращаться к серверу для загрузки стилей.
Возможно, это было бы возможно, если взять таблицу стилей и вставить ее в элемент заголовка документа ... Кто-нибудь делал это раньше?



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Я могу представить себе случаи, когда вы захотите динамически генерировать JS или CSS, но обычно вам лучше создавать статические файлы для каждого и делать свой код достаточно общим, чтобы удовлетворить все ваши потребности.
Это выходит за рамки простого повторного использования кода - если вы динамически генерируете что-либо из этого, его нужно будет повторно загружать каждый раз, когда он будет использоваться. Вы тратите время ЦП на рендеринг шаблонов и тратите впустую полосу пропускания, отправляя одни и те же (или потенциально одни и те же) данные по сети снова и снова.
Но если у вас есть хороший вариант использования метакодирования, нет причин, по которым вы тоже не можете:
а) поместите JS или CSS в заголовок (или тело, в случае JS) вашего визуализированного шаблона б) создать представление для JS или CSS и использовать механизм шаблонов Django для их рендеринга.
Тег {% include%} отлично подойдет для (a), а для (b) вы просто используете обычный HTML для ссылки на URL-адрес вашего представления.
В вашем файле JS:
var style = document.createElement('link');
style.setAttribute('rel', 'stylesheet');
style.setAttribute('type', 'text/css');
style.setAttribute('href', 'style.css');
document.getElementsByTagName('head')[0].appendChild(style);
Надеюсь, это поможет.
С помощью jquery ...
$('head').append($('<link rel = "stylesheet" type = "text/css" href = "style.css">'))