Reactjs hot-loader css files - html

Question

I started new project with react-hot-boilerplate. Everything worked fine until i tried to add a css file to index.html.
<Link href="/style/main.css" rel="stylesheet">
Hot-loader doesnt read the css file. After some research i found out this line in server.js redirect all request to index.html
app.get('*', function(req, res) {
res.sendFile(path.join(__dirname, 'index.html'));
});
i changed it to
app.get('/', function(req, res) {
res.sendFile(path.join(__dirname, 'index.html'));
});
app.get('/style/main.css', function(req, res) {
res.sendFile(path.join(__dirname, 'style/main.css'));
});
and it worked. is there any better way to do that? do i need to map all the resources i servere.js?
I dont want to use style-loader or css-loader in webpack because i get a lot of errors and i cant simply use className="myCustomStyle".
var path = require('path');
var webpack = require('webpack');
var packageJSON = require('./package.json');
const PATHS = {
build: path.join(__dirname, 'target', 'classes', 'META-INF', 'resources', 'webjars', packageJSON.name, packageJSON.version)
};
module.exports = {
devtool: 'cheap-module-source-map',
resolve: {
extensions: ['', '.js', '.jsx', '.scss'],
alias: {
config: path.join(__dirname, 'src/config/dev.js'),
},
},
entry: [
'webpack-hot-middleware/client',
'./src/index'
],
output: {
path: PATHS.build,
filename: 'app-bundle.js',
publicPath: '/static/'
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['react-hot', 'babel'],
include: path.join(__dirname, 'src')
}, {
test: /\.css$/,
loader: 'style-loader!css-loader?modules=true&localIdentName=[name]__[local]___[hash:base64:5]'
}]
}
};

Answer 1

Loading the static files should not be handled on server side. So you should not insert your styling or js files in server else the loading time would be more and since you are using react so all your files would be js so if you write the resource to be sent on the server then it's of no use. so the best option is to write loaders in webpack.
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel',
exclude: /(node_modules|bower_components)/
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},
{
test: /\.json$/,
loader: 'json'
},
{
test: /\.(png|jpg)$/,
loader: 'file-loader'
}
]
}

Answer 2

If you want to do something like
<div className={styles.app}>
Then your component should be like
export default class Mycomponent extends Component{
let styles = {
app:{
'color': 'red',
}
}
return(){
render(
<div className={styles.app}>
)
}
}
This will solve your problem