Как внедрить CSS в файл JavaScript при компиляции библиотеки es2015 - PullRequest
Новая
       15

Как внедрить CSS в файл JavaScript при компиляции библиотеки es2015

1 голос
/ 08 апреля 2019

Я работаю над некоторой библиотекой React UI и хочу использовать какой-то сторонний компонент, например, базу для моего настраиваемого компонента.

Этот сторонний компонент требует включения файлов стилей в HTML (default.css иtheme.css)

Я не могу этого сделать, потому что это должна быть скомпилированная библиотека javascript без каких-либо CSS и т. д., поэтому пользователи должны просто импортировать файл JS без какого-либо копирования / включая CSS в свой HTML.

Я не могу использовать Styled Component, JSS и т. Д., Потому что я не хочу переписывать весь код компонента triparty для вставки всех необходимых классов в теги.

Так что я знаю, что веб-пакет может извлечьстили из файла, преобразовать их в строку и вставить в HTML-документ, но я не могу этого сделать, потому что webpack создает огромный большой скомпилированный файл, поэтому я использую Babel.

ТАК, есть ли возможность извлечьCSS из файла и преобразовать его в сценарий, и когда пользователь импортирует этот скомпилированный компонент JavaScript, этот сценарий должен быть выполнени вставьте CSS в HTML-страницу?

Спасибо за любую помощь

1 Ответ

1 голос
/ 08 апреля 2019

Не уверен, что это может помочь, но только с помощью js внедрение таблицы стилей будет выглядеть следующим образом.Обратите внимание на использование строки шаблона (обратный удар, не обязательно, но здесь проще), стилизация будет в нижней части документа, но это настраивается по мере необходимости . 

const css = `
  body {background:red}
`

let link = document.createElement("style")
link.rel = "stylesheet"
link.type = "text/css"
link.textContent = css

document.body.appendChild(link)
<body>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...