0

React-toolbox 正在以他自己的方式构建它的样式。所有样式看起来像这样： [链接]

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

在官方 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'
}
4

2 回答 2

0

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

于 2016-02-22T10:13:12.953 回答
0

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

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

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

于 2016-10-12T23:25:37.397 回答