Загрузка Sass и внедрение текста CSS в родительский документ из приложения React - PullRequest
Новая
       49

Загрузка Sass и внедрение текста CSS в родительский документ из приложения React

0 голосов
/ 02 июля 2018

У меня есть приложение React, которое загружается в родительский документ с помощью некоторого кода JavaScript, который:

  • создает <iframe> элемент
  • создает <div>
  • вставляет тег <style> в <head> для стилизации вставленного <div>

Грубо говоря, это работает с использованием следующего: 

// example.jsx

// Require the css using css-loader
const styles = require('../styles/example.css');

// Find the parent document
const doc = window.parent.document;

// Inject our stylesheet for the widget into the parent document's
// HEAD as a style tag
const css = styles.toString();
const style = doc.createElement('style');
style.type = 'text/css';
if (style.styleSheet) {
  // This is required for IE8 and below.
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}
doc.head.appendChild(style);

Используется css-loader в нашей конфигурации Webpack, чтобы require().toString() работал для динамической установки cssText.

Хотя это работает, я не знаю, является ли это идеалом. И мы бы предпочли написать Sass и воспользоваться преимуществами @import для добавления других CSS (например, перезагрузки) и получить преимущества других инструментов для Sass.

Есть ли лучший способ, с помощью которого мы можем достичь того же результата, если вставить текст <style> в этот родительский документ, не жертвуя нашей способностью использовать инструменты, которые мы предпочитаем?

1 Ответ

0 голосов
/ 10 июля 2018

Установите шлем реакции и попробуйте это в своем компоненте реакции: 

<Helmet>
    <style>
        // Insert CSS string here
    </style>
</Helmet>

Другой вариант - загрузить sass непосредственно в родительский объект, но оставить все его стили за функцией sass, которая проверяет, существует ли #react-root.

...