Paulos3000 Paulos3000 - 11 months ago 74
CSS Question

Trouble implementing Webpack css-loader, error on compile

I'm new to webpack, and I'm playing around with trying to create my own build from forking another decent build.

One of things that wasn't compiling was the css, so I did the following:

  1. Make sure there were no css loaders currently in the webpack config file (there weren't)

  2. Run
    npm install css-loader --save-dev

  3. Add loaders

  4. Add
    import css from './static/css/style.css';
    to my entry .js file

  5. Make some arbitrary changes to my css to test

Just for the sake of clarity, my loaders looked like this:

loaders: [
{ ...babel loader... },
{ test: /\.css$/, loader: "style-loader!css-loader" },
{ test: /\.png$/, loader: "url-loader?limit=100000" },
{ test: /\.jpg$/, loader: "file-loader" }

I then ran
npm run build
, and it was here that my terminal came up with the following error:

ERROR in ./src/app-client.js
Module not found: Error: Cannot resolve module 'style-loader' in /path/to/app/.../src
@ ./src/app-client.js 15:13-46

I'm not really sure where I'm going wrong here, any help or pointers would be appreciated.

Answer Source

You probably forgot to install style-loader. So just run:

npm install style-loader --save-dev