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.
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 https://github.com/css-modules/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 */ }