CSS file causing error in react/webpack configuration

Question

I have a fullstack project, which is made with Django-REST and React as the frontend.

Everytime i try to load a css file into my react application i get an error

import './Dashboard.css'

export default class Dashboard extends Component {

render() {
...

Dashboard.css

body {
margin:0;
}

here is my webpack.config.js

module.exports = {
module: {
       rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            }
        ]
    }
}

what is weird to me is that, inline css, works just fine, it's only when i try to load an external sheet, that i get issues. Does anybody know what may be the cause of the problem?

And when you leave the .css file empty, the error is still there? — josemartindev
– josemartindev, Commented Apr 12, 2019 at 12:56
As mentioned in the error, you likely need to use a CSS loader such as this one. — Someone
– Someone, Commented Apr 12, 2019 at 12:56

etarhan · Accepted Answer · 2019-04-12 12:59:17Z

5

You need a css-loader. Update webpack.config.js to this:

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ]
  }
}

And install the loader:

npm install --save-dev css-loader

It should build properly now. You can read more in the Webpack docs

answered Apr 12, 2019 at 12:59

etarhan

4,1762 gold badges18 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Kristoffer Tølbøll Over a year ago

should i add this to the existing rules?

Kristoffer Tølbøll Over a year ago

or should i just add an existing module?

etarhan Over a year ago

@baileyhaldwin I already added it for you. You can just copy paste my answer and replace what you have in your webpack.config.js

Kristoffer Tølbøll Over a year ago

absolutely, I had to wait 4 minutes to accept the answer.

etarhan Over a year ago

@baileyhaldwin woah, didn't realize I was that quick :D

Collectives™ on Stack Overflow

CSS file causing error in react/webpack configuration

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related