OP
т-е вариантов нет никаких объединить js + css в один js?
Size: a a a
2021 May 13
A
то что вы пытаетесь сделать называется css-in-js, причем современные хорошие реализации css-in-js все равно генерируют css + js на выходе
OP
куда копать? что посмотреть ?
A
Засунуть css внутрь js возможно.
Стоит ли это делать - определенно нет
делается ли это указанием в качестве энтри js файла - совершенно точно нет )
Стоит ли это делать - определенно нет
делается ли это указанием в качестве энтри js файла - совершенно точно нет )
A
куда копать что смотреть зависит от вашего спецефического кейса.
Варианты от заюзать реакт и либы позволяющие писать стили прямо в jsx до написать свой велосипед который будет вставлять style тэг после загрузки js (оба варианта полная хрень с точки зрения времени старта приложения)
Варианты от заюзать реакт и либы позволяющие писать стили прямо в jsx до написать свой велосипед который будет вставлять style тэг после загрузки js (оба варианта полная хрень с точки зрения времени старта приложения)
A
расскажите зачем вам один файл я подскажу как лучше сделать
OP
я собрал некий web component. Хочу его без лишних заморочек использовать на других веб страница. Просто добавляя как widget.js - без необходимости испортирования стилей и тд. Шрифтов. Чтобы был только один файл
A
ага, ну тут все просто решается, вам нужно загрузить с помощью raw loader содержимое файла стилей прямо в <style> тэг находящегося внутри shadow dom рута вашего комонента
A
я сейчас не у пк, но если вам не горит то через часик напишу вам пример такого веб компонента
OP
хорошо! буду очень признателен за пример! Спасибо
A
Посмотрите вот здесь
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
Раздел styling shadow dom
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM
Раздел styling shadow dom
OP
ок - читаю
A
Видите там style.textContent = а дальше css строкой
A
В вебпаке есть такой raw-loader который позволит вам импортировать в js файл содержимое css файла в виде строки
A
Получится так.
import styles from "./style.css"
...
style.textContent = stylesA
Бонус - благодаря изоляции стилей в вебкомпоненте (тот самый shadow dom) страница куда вы вставляете компонент никогда не сможет случайно испортить стили при совпадении названний классов в приложении и компоненте
OP
Спасибо - смотрю raw-loader
OP
т-е мне сначала нужно собрать все стили в один файл - потом прогнать его через raw-loader ?
A
Если они не взаимосвязаны то просто импортируйте их всех и объедините как строки обычной конкатенацией (+)