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

Question

React-toolbox正在用他自己的方式构建自己的风格。所有样式看起来都是这样的：[ link ]

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

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

我的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'
}

Answer 1

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

Answer 2

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

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

React Toolbox在示例中使用了这个插件，所以检查spec和docs站点或示例的配置就足够让它工作了！