Javascript 将react工具箱样式构建为单独的css文件

React工具箱正在以他自己的方式构建它的样式。所有样式如下所示：

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

在react工具箱官方网站上，它们将所有样式作为一个单独的.css文件包含在内，并且看起来一切都很好。如何以同样的方式构建项目

My webpack.config的loaders css部分如下所示：

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

---

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

在您的配置中，您使用的是

css加载器

和

样式加载器

，因此每个所需的文件都捆绑在

样式

标记中，并注入到文档中。这可能会在第一次渲染时产生一些FOUC问题，以便您可以使用生产应用程序

有了这个插件，当您在部署时创建包时，webpack将把每个应该放在样式标签中的样式提取到一个单独的CSS文件中。通过这种方式，您可以像往常一样包含CSS，避免FOUC问题，并允许缓存和其他CSS功能

---

React Toolbox在示例中使用此插件，因此检查spec和docs站点或示例的配置应足以使其正常工作

我的移动设备不支持材质ui。即使是文档页面也没有材料，ui在我的手机上也不起作用。在react工具箱中，至少文档页面可以正常工作，所以我知道可以制作一个可以正常工作的应用程序。。。问题。您可以从开发工具中提取所有css并将其打包到一个sep.文件中。我确信这是否可行。react工具箱提供给元素的类名与我在.scss文件中看到的不同。也许是因为某种原因…我可以问你为什么喜欢材质界面吗？有一些明显的缺点，如缓存、性能、主题化和定制。目前我看到的唯一好处是更大的社区和更多的组件，但在RT中仍然有最重要的组件。顺便说一句，harumando，您所指的转换是CSS模块。原始类映射到散列类以避免冲突。它们可以通过网页包提取：）