0

React-toolbox is building its styles in his own way. All styles look like this: [ link ]

This way of including apparently is not supported by mobile devices (or at least my phone which i'm building an app for). And when i check the project on the mobile device i get everything without styles.

On official react-toolbox site they include all styles as a separate .css file and everything looks good. How can i build the project in the same way?

My webpack.config's loaders css section looks like this:

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

2 Answers2

0

Hmmmm... This is may not the expected answer. But I've wasted a lot of time with the same issue. Depending on how far your development process is progressed you are able to checkout an alternative: material-ui. I always prefer material-ui over react-toolbox.

MrBoolean
  • 601
  • 7
  • 13
  • material ui is not supported by my mobile device. Even the documentation page doesn't of material-ui doesn't work on my phone. In react-toolbox at least the documentation page works so i know that it is possible to make an app that works. – harumando Feb 22 '16 at 10:17
  • Hmmmm... Prob. you can extract all the css from the dev-tools and pack it into a sep. file. – MrBoolean Feb 22 '16 at 10:30
  • i'm nut sure if this would work. The class names react-toolbox is giving to elements are different from what i see in .scss files. May be react transforms them somehow... – harumando Feb 22 '16 at 12:43
  • May I ask why do you prefer material-ui? There are some obvious disadvantages like caching, performance, theming and customization. The only benefit I see at the moment is the bigger community and more components but you still have the most important ones in RT. BTW harumando, the transformation you are referring is CSS Modules. The original classes are mapped to hashed ones to avoid collisions. They can be extracted with webpack :) – javivelasco Oct 12 '16 at 23:27
0

In your configuration you are using css-loader and style-loader so every required file is bundled in a style tag and injected into the document. This may create some FOUC problems at the first render so for production apps you can use extract-text-webpack-plugin.

With that plugin, when you create your bundle at deploying time, webpack will extract every style that should go into a style tag into a separate CSS File. This way, you can include your CSS as usual avoiding FOUC issues and allowing caching and other css goodies.

React Toolbox uses this plugin in the examples so checking the configuration for the spec and docs site or the example should be enough to make it work!

javivelasco
  • 426
  • 3
  • 10