将 react-toolbox 样式构建为单独的 css 文件答案

【问题标题】：Build react-toolbox styles as a separate css file将 react-toolbox 样式构建为单独的 css 文件
【发布时间】：2016-02-22 09:21:34
【问题描述】：

React-toolbox 正在以他自己的方式构建它的样式。所有样式如下所示： [ link ]

移动设备（或者至少我正在为其构建应用程序的手机）显然不支持这种包含方式。当我在移动设备上查看项目时，我得到的所有内容都没有样式。

在官方 react-toolbox 网站上，它们将所有样式都包含在一个单独的 .css 文件中，一切看起来都不错。我怎样才能以同样的方式构建项目？

我的 webpack.config 的加载器 css 部分如下所示：

{
   test: /\.(scss|css)$/,
   loader: 'style-loader!css-loader?sourceMap&modules&importLoaders=1&localIdentName=[name]-[local]___[hash:base64:5]!sass-loader?sourceMap'
}

【问题讨论】：

标签： javascript reactjs jsx react-toolbox

【解决方案1】：

嗯……这可能不是预期的答案。但是我在同样的问题上浪费了很多时间。根据您的开发过程的进展程度，您可以签出替代方案：material-ui。我总是更喜欢 material-ui 而不是 react-toolbox。

【讨论】：

我的移动设备不支持材料 ui。即使没有材料的文档页面也无法在我的手机上使用。在 react-toolbox 中，至少文档页面有效，所以我知道可以制作一个有效的应用程序。
嗯...可能。您可以从开发工具中提取所有 css 并将其打包成一个 sep。文件。
我很确定这是否可行。 react-toolbox 赋予元素的类名与我在 .scss 文件中看到的不同。可能会以某种方式改变它们......
请问为什么更喜欢material-ui？有一些明显的缺点，如缓存、性能、主题和自定义。我目前看到的唯一好处是更大的社区和更多组件，但您仍然拥有 RT 中最重要的组件。顺便说一句，你所指的转换是 CSS 模块。原始类被映射到散列类以避免冲突。它们可以用 webpack 提取 :)

【解决方案2】：

在您的配置中，您使用的是css-loader 和style-loader，因此每个需要的文件都捆绑在style 标记中并注入到文档中。这可能会在第一次渲染时产生一些 FOUC 问题，因此对于生产应用程序，您可以使用 extract-text-webpack-plugin。

使用该插件，当您在部署时创建包时，webpack 会将应进入样式标签的每个样式提取到单独的 CSS 文件中。这样，您可以像往常一样包含您的 CSS，避免 FOUC 问题并允许缓存和其他 CSS 好东西。

React Toolbox 在示例中使用此插件，因此检查规范和文档站点或示例的配置应该足以使其工作！

【讨论】：