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 */ }
