Question

React-toolbox正在以自己的方式构建其样式。所有样式都是这样的： [ link ]

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

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

我的webpack.config＆＃39; s加载器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。我总是喜欢材料-ui而不是react-toolbox。

Answer 2

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

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

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

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

2 个答案: