Problem with loading CSS files in Webpack

Question

This is now the second day I'm trying to figure out what I've might done wrong. So far, I've followed different tutorials, reading through Webpack documentation, tried to reinstall style-loader and css-loader and even started a setup on a different machine. No luck!

Here is the error appearing every time I start webpack bundle:

ERROR in ./src/style.css 1:5
Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> body {
|   background: green;
| }
 @ ./src/index.js 2:0-21

I'm thinking it might be something within my configuration, when I delete "module", I'm getting the same message:

const path = require("path");

module.export = {
    mode: "development",
    entry: "./src/index.js",
    output: {
        filename: "main.js",
        path: path.resolve(__dirname, "dist"),
    },
    module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

I've also installed all dependancies:

{
  "name": "Timer",
  "version": "1.0.0",
  "private": true,
  "description": "",
  "scripts": {
    "start": "webpack --config=webpack.config.js --mode=development"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^4.2.1",
    "style-loader": "^1.2.1",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12"
  },
  "dependencies": {
    "lodash": "^4.17.19"
  }
}

I'm new at this, so I don't know where to go from here...

can you try please to require the .css with inline loaders just to see if the problem is with the webpack config? like this: require('style-loader!css-loader!./src/style.css') — Raz Ronen
– Raz Ronen, Commented Aug 9, 2020 at 7:24
That actually helped me.After testing your solution, I realised that the problem must be in webpack.config.js, and it was! If you look at my code it says "module.export" instead of "module.exports" — zaricm
– zaricm, Commented Aug 9, 2020 at 13:45
Great :) lets post it as answer so others could benefit it also — Raz Ronen
– Raz Ronen, Commented Aug 9, 2020 at 14:06

Raz Ronen · Accepted Answer · 2020-08-09 14:07:25Z

1

Like you mentioned in your comment:

Change module.export to module.exports.

answered Aug 9, 2020 at 14:07

Raz Ronen

2,6683 gold badges16 silver badges29 bronze badges

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

Collectives™ on Stack Overflow

Problem with loading CSS files in Webpack

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related