webpack css-loader parse failure

Question

I'm using webpack loaders (css-loader/style-loader) and I just don't know why the simple css code below,

body {
    background: blue;
}

keeps resulting in this error,

ERROR in ./app/main.css 1:5
Module parse failed: Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
> body {
    background: blue;
}
@ ./app/index.js 1:0-21

this is a snippet from webpack.config.js

const Paths = {
    app: __dirname + '/app',
    build: __dirname + '/build',
};
module: {
        rules: [
        {
            test: /\.css&/,
            use: [{loader: 'style-loader'},
                  {loader: 'css-loader'}],
            include: Paths.app
        }]
    }

and this is my package.json snippet

"devDependencies": {
    "css-loader": "^1.0.0",
    "style-loader": "^0.21.0",
    "webpack": "^4.15.1",
    "webpack-cli": "^3.0.8"
  },

this is my first Webpack,css attempt, thanks for your time

yacine benzmane yacine benzmane · Accepted Answer · 2018-07-09T14:04:29

You have to import your css.

add const s = require('./main.css'); to index.js

Let me know if you are still having problems with it.

webpack css-loader parse failure

1 Answers