Can't import css style in React application - css

Question

Hello I have problem with import css in React application and I don't know what is wrong in my code:
Error:
133:1 Uncaught Error: Module parse failed: D:\src\styles\styles.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
|*{
| color:red;
| }
at eval (133:1)
at Object.<anonymous> (bundle.js:979)
at __webpack_require__ (bundle.js:20)
at eval (app.js?bd9c:4)
at Object.<anonymous> (bundle.js:737)
at __webpack_require__ (bundle.js:20)
at Object.<anonymous> (bundle.js:405)
at __webpack_require__ (bundle.js:20)
at bundle.js:63
at bundle.js:66
styles.css (only test file):
*{
color:red;
}
webpack config.js:
const path = require('path');
module.exports={
entry: './src/app.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module:{
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}, {
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}]
},
devtool: 'cheap-module-eval-source-map',
devServer:{
contentBase: path.join(__dirname, 'public')
}
};
package.json:
{
"name": "",
"version": "1.0.0",
"main": "index.js",
"author": "",
"license": "",
"scripts": {
"serve": "live-server public/",
"build": "webpack",
"dev-server": "webpack-dev-server"
},
"dependencies": {
"babel-cli": "6.24.1",
"babel-core": "6.25.0",
"babel-loader": "7.1.1",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-preset-env": "1.5.2",
"babel-preset-react": "6.24.1",
"css-loader": "0.28.4",
"live-server": "^1.2.0",
"react": "16.0.0",
"react-dom": "16.0.0",
"react-modal": "2.2.2",
"style-loader": "0.18.2",
"validator": "8.0.0",
"webpack": "3.1.0",
"webpack-dev-server": "2.5.1"
}
}
.babelrc :
{
"presets":[
"env",
"react"
],
"plugins":[
"transform-class-properties"
]
}
app.js:
import React from 'react';
import ReactDOM from 'react-dom';
import './styles/styles.css';
ReactDOM.render(<App/>, document.getElementById('app'));
I dont have idea what is wrong ;?

Answer 1

Try using this rule:
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: 'style-loader' },
{
loader: 'css-loader',
options: {
modules: true
}
}
]
}
]
}

Answer 2

Try this.
const path = require('path');
module.exports={
entry: './src/app.js',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
module:{
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
test: /\.css$/,
include: /node_modules/,
use: ['style-loader', 'css-loader'],
}]
},
devtool: 'cheap-module-eval-source-map',
devServer:{
contentBase: path.join(__dirname, 'public')
}
};
Also, try changing your css.
body {
background-color: red;
}
Just to see if it works.

Answer 3

Thanks for answers. I don't know why but after restrting my computer, my first version suddenly it's working...
I think that I need to clean my computer :)

Answer 4

Couple ways you can solve this.
Add to your "loaders" in package.json
{ test: /\.css$/, loader: "style-loader!css-loader" }
Add to your "rules" in package.json
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ]}