Babel Compile CSS files

I'm trying to configure a ReactJS application, using Express as back-end server. I'm facing an issue with .css files, when I run 'npm start' I'm getting this error.

/client/app.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .layoutHeader {
| background: #00AAFA;}

This is my application configuration.

package.json

 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "NODE_ENV=development node_modules/.bin/babel-node --presets 'react,es2015' server/server.js" }, "dependencies": { "body-parser": "^1.17.1", "ejs": "^2.5.6", "express": "^4.15.2", "moment": "^2.18.1", "mongoose": "^4.9.6", "react": "^15.5.4", "react-bootstrap": "^0.30.10", "react-dom": "^15.5.4", "react-router": "^2.4.0", "react-router-redux": "^4.0.8", "redux": "^3.6.0", "request": "^2.81.0" }, "devDependencies": { "babel-cli": "^6.24.1", "babel-core": "^6.24.1", "babel-loader": "^7.0.0", "babel-preset-es2015": "^6.24.1", "babel-preset-react": "^6.24.1", "css-loader": "^0.28.0", "nodemon": "^1.11.0", "react-hot-loader": "^1.3.1", "style-loader": "^0.16.1", "webpack": "^2.4.1", "webpack-dev-middleware": "^1.10.2", "webpack-hot-middleware": "^2.18.0" }

webpack.config.js

module.exports = { devtool: "", entry: [ 'webpack-hot-middleware/client', path.join(path.resolve(__dirname), 'client', 'client.js') ], output: { path: path.join(path.resolve(__dirname), 'public', 'js'), filename: 'bundle.js', publicPath: '/js/' }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', query: { cacheDirectory: 'babel_cache', presets: debug ? ['es2015', 'react'] : ['react', 'es2015'] } } { test: /\.css$/, exclude: /node_modules/, loader: 'style-loader!css-loader', }, { test: /\.css$/, include: /node_modules/, loaders: ['style-loader', 'css-loader'], } ] },
}

And I didn't configure anything in .babelrc file.

I wanted to write individual CSS for every component and that can be imported to only that component.

I think I missed some configuration with babel, please help me to configure this application.

Thanks in advance.

2 Answers

The webpack config looks correct. Probably issue with import of CSS, it has to be smtl like that:

import './style.css'; where './' is path.

If you want to write CSS for every component, I suggest you take a look CSS Modules

If you are using webpack-dev-middleware you need to ensure you configure it with your webpack config:

const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackConfig = require('path/to/webpack.config.js');
const compiler = webpack(webpackConfig);
module.exports = webpackDevMiddleware(compiler, { /* options */ }