importation of style files from modules that I depend on.

[xinghengwang]

I am trying to use react-toolbox which provides widgets and comes with its own style sheets. http://react-toolbox.com/ but whenever I try to import any element, I get this error:

[0] ==> 🚧 Webpack development server listening on port 3001 [1] [webpack-isomorphic-tools] [error] asset not found: ./~/react-toolbox/lib/animations/slide-left.scss [1] [webpack-isomorphic-tools] [error] asset not found: ./~/react-toolbox/lib/animations/slide-right.scss [1] [webpack-isomorphic-tools] [error] asset not found: ./~/react-toolbox/lib/animations/zoom-in.scss [1] [webpack-isomorphic-tools] [error] asset not found: ./~/react-toolbox/lib/animations/zoom-out.scss [1] [webpack-isomorphic-tools] [error] asset not found: ./~/react-toolbox/lib/ripple/style.scss [1] [webpack-isomorphic-tools] [error] asset not found: ./~/react-toolbox/lib/button/style.scss [1] [webpack-isomorphic-tools] [error] asset not found: ./~/react-toolbox/lib/date_picker/style.calendar.scss [1] [webpack-isomorphic-tools] [error] asset not found: ./~/react-toolbox/lib/overlay/style.scss [1] [webpack-isomorphic-tools] [error] asset not found: ./~/react-toolbox/lib/dialog/style.scss

This happens with other libraries also. I am also tried to use react-bootstrap-datetimepickered According to here, https://github.com/quri/react-bootstrap-datetimepicker/issues/141 I suppose to include the css file this way:

import 'react-bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css'; but I keep getting this error: [require-hook] Trying to load "bootstrap-datetimepicker.min.css" as a "*.js"

I even changed webpack for dev.config.js to include .css files:

` { test: /.css$/, // Only .css files loader: 'style!css' // Run both loaders },

`

Does anyone have trouble loading CSS or SCSS style files that are used in different libraries installed via NPM?

[OkuraSt]

Something similar was happening here: https://github.com/erikras/react-redux-universal-hot-example/issues/750# Does it helped you?

[xinghengwang]

thanks, I found a slight work around for people who may want to do thi: I found if I need to import CSS for a third party component that I am using, I copy over the css file as .scss and put into the src/theme folder, and then import from the bootstrap.override.scss, that seems to work.

But I'll check out the solution in #750 also.

[janhoogeveen]

Found out that I can do this in the component that needs styling:

import React, { Component } from 'react'; if (__CLIENT__) { require('leaflet/dist/leaflet.css'); }

Then again, not sure what happens server-side (probably nothing) or if this works very well in production.

[efernandesng]

@janhoogeveen style was applied but got an invalid checksum warning.

Warning: React attempted to reuse markup in a container but the checksum was invalid.

Edit: Sorry.. The warning is not ratiocinated with you suggestion

[ericluwj]

By default, the only modules that are recognized in node_modules are indicated in https://github.com/erikras/react-redux-universal-hot-example/blob/master/webpack/dev.config.js#L101 for development mode.

So let's say if you want import 'react-bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css'; to work, you will need to add '.css' to the array ['', '.json', '.js', '.jsx']. Otherwise, webpack-isomorphic-tools will not be able to find the asset as webpack does not resolve the file properly.