Подключение style.css в javascript файле?

Question

[Mesuti]

Привет!
Есть cтраница index.html и к ней подключается много файлов (css, js).
Как можно организовать подключение всех файлов одной строкой?
Возможен ли вариант прописать все подключения в js файле и вместо большой бороды указывать только одну строку типа
<script src="main.js"></script>?
p.s. Это нужно, когда много html сайтов и ко всем нужно прицепить свои стили и настройки и не надо копировать бороду, вставил всего 1 подключение и все. Т.е. упор на не на качество кода, а на скорость подключения своих заранее подготовленных файлов.

Answer 1

[alfangur]

да можно,

spoiler

let head = window.document.getElementsByTagName('head')[0]

function includeCSS(aFile, aRel){
	let style = window.document.createElement('link')
	style.href = aFile
	style.rel = aRel || 'stylesheet'
	head.appendChild(style)
}

дальше сами думайте как автоматизировать процесс.

Comments

[alfangur]

Александр Сорокин,
head - это переменная секции head документа html
includeCSS - это JS функция которая подключает указанный файл к html документу

пример использования
includeCSS('MyPage.css'); // это подключит к текущему html документу файл стилей MyPage.css
эту функцию вы можете вызывать в цикле где будете подключать из списка css файлы.

для подключения JS файла к документу необходима другая функция

spoiler

function loadJS(aFile, aAsync){
	let script = window.document.createElement('script')
	script.type = 'text/javascript'
	script.src = aFile
	script.async = aAsync || false
	head.appendChild(script)
}

[alfangur]

Александр Сорокин,

spoiler

function includeCSS(aFile){
  let style = window.document.createElement('link')
  style.href = aFile
  style.rel = aRel || 'stylesheet'
  head.appendChild(style)
}

includeCSS('style.css')
includeCSS('main/style.css')
includeCSS('www.site.ru/style.css')

с подключением js аналогично как и с css

[Mesuti]

alfangur, спасибо за полный ответ! очень интересное решение.

[Сергей delphinpro]

Александр Сорокин, не интересное. крайне ужасное для реального использования.

[alfangur]

Сергей delphinpro, хотелось бы узнать почему "крайне ужасное для реального использования"? надо заполнять пробелы в понимании, знаниях!

[Mesuti]

Сергей delphinpro, Почему ужасное? я пока увидел такой минус - грузится сначала страница, а уже потом загружаются стили и т.д. с помощью js скрипта. То есть первые секунды страница пляшет из стороны в сторону =)
Но это не важно, так как я использую только подключение одного небольшого блока. И для скорости самое то

Answer 2

[Егор Живагин]

Так есть вариант круче - сборщиком собирать css в один файл, js в один-два файла. И подключать только их.
Ну, и у вас появятся все плюшки сборщика: минификация, префиксы всякие, babel, ...

Comments

[Mesuti]

Интересный вариант. Подскажете какие сборщики подойдут?
В своем вопросе я ищу только вариант подключения только 1 файла js. и он уже сам подключает стили

[Егор Живагин]

Александр Сорокин, любой сборщик, наиболее популярный для этих целей - Gulp

Подключение CSS в JS коде чревато проблемами, с ходу:
1 - Первый рендер страницы будет без стилей, до запуска js-кода и подгрузки стилей будет "проблеск" страницы без стилей.
2 - Много CSS-файлов = дольше их загрузка, я такое в современных проектах вижу очень редко
3 - Есть небольшой процент пользователей с отключённым js. Они ничего не увидят