Using CSS in Webpack

Question

I've inherited a web app that uses webpack. In my app, I have a directory called "pub", which looks like this:

./pub
    /styles
      app.css
    /images
      brand.png

I have been trying unsuccessfully all morning to use these via webpack. In my webpack.config.js file, I have the following:

const path = require('path');

const projectRoot = path.resolve(__dirname, '../');

module.exports = {
  entry: {
    app: './src/index.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/, 
        loader: "style-loader!css-loader"
      },
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }      
    ]
  }
};

Then, in my index.js file, I have the following:

import logoImage from './public/images/brand.png';
require("css!./public/css/app.css");

When I run webpack, I receive an error that says:

BREAKING CHANGE: It's no longer allowed to omit the '-loader' suffix when using loaders.
                 You need to specify 'css-loader' instead of 'css',
                 see https://webpack.js.org/guides/migrating/#automatic-loader-module-name-extension-removed

I don't really understand this error. When I look at it, and then I look at my webpack.config.js file, it looks to me like I'm using css-loader. Beyond that though, how do I use a style in my webpage once the require statement is working. I'm just trying to use webpack with a web app and want to import my brand and CSS and I can't figure it out.

Joe · Accepted Answer · 2017-07-03 18:54:31Z

2

You don't need the css! in your require statement

require("css!./public/css/app.css");

You can just use

require("./public/css/app.css");

Because you are testing files with:

{
    test: /\.css$/, // <-- here
    loader: "style-loader!css-loader"
  },

Or without the rule in your webpack config

// No test in rules matched but you tell webpack
// explicitly to use the css loader
require("style-loader!css-loader!./public/css/app.css");

edited Jul 3, 2017 at 18:54

answered Jul 3, 2017 at 18:48

Joe

82.9k18 gold badges130 silver badges147 bronze badges

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

Comments

Eric · Accepted Answer · 2017-07-03 18:54:24Z

0

Your hierarchy is pub/styles/app.css but the location you use in your require is public/css/app.css. It looks like you're trying to call your css from the wrong location.

If this doesn't solve your issue, check out this link https://webpack.github.io/docs/stylesheets.html

The first step on that page is to install css-loader and configure it, this might be a good place to start.

answered Jul 3, 2017 at 18:54

Eric

3321 silver badge5 bronze badges

Collectives™ on Stack Overflow

Using CSS in Webpack

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related