从 React 应用程序加载 Sass 并将 CSS 文本注入到父文档中
Posted
技术标签:
【中文标题】从 React 应用程序加载 Sass 并将 CSS 文本注入到父文档中【英文标题】：Loading Sass and injecting CSS text into a parent document from a React app 【发布时间】：2018-12-11 01:05:27 【问题描述】：我有一个 React 应用程序，它通过一些 shim 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);
这在我们的 Webpack 配置中使用 css-loader，以便让 require().toString() 用于动态设置 cssText。
虽然这可行，但我不知道这是否理想。而且我们更愿意编写 Sass 并获得 @import 带来的好处以引入其他 CSS（如重置），并获得其他 Sass 工具的好处。
是否有更好的方法可以实现将<style> 文本注入此父文档的相同结果，而不会牺牲我们使用我们喜欢的工具的能力？
【问题讨论】：
你看过 react-helmet 吗？它有助于管理 并且相当轻量级。 @NathanChristian 你知道它是否能够管理实际加载应用程序的iframe 的父文档的<head>（而不是iframe 本身）？跨度>
它使用document.head，如果找不到，则使用选择器为head的元素。
您是否需要专门插入 css 作为样式标签，或者只是将其全局导入就可以了？因为如果是这种情况，那么您可以在模块中管理您的特殊性，然后让父级或模块本身导入该 scss 文件。
@NathanChristian 我们的应用程序基本上加载到客户的页面中：<body><iframe></iframe><div id='react-root'></div></body> 其中iframe 的src 是我们的 React 应用程序，#react-root 是应用程序呈现的位置。我们需要能够将样式应用于父文档，而不是iframe。它的完成方式并不重要，但我个人不知道如何在手动注入 CSS 文本之外完成此操作。
【参考方案1】：
安装 react-helmet，然后在你的 react 组件中试试这个：
<Helmet>
<style>
// Insert CSS string here
</style>
</Helmet>
另一种选择是将 sass 直接加载到父级中，但将其所有样式设置在一个检查 #react-root 是否存在的 sass 函数后面。
【讨论】：
以上是关于从 React 应用程序加载 Sass 并将 CSS 文本注入到父文档中的主要内容，如果未能解决你的问题，请参考以下文章
React 故事书 sass-loader 导入 node_modules
React，Sass，从 .scss 文件导入 img 时出错