When using css-loader, imported style object is empty

Question

I'm trying to use css-loader to import styles from style sheets for each react component, but the object I import is empty. See code:

Header.js:

import React from 'react';
import classes from './Header.css';

const header = () => {
    console.log('classes obj', classes);

    return (
        <div className={classes.Header}>
            <h1>Title Goes Here</h1>
        </div>
    )
}


export default header;

And here is my Header.css file:

.Header {
    background-color:  rgb(49, 118, 197);
}

And here is a snippet of my webpack config for dev:

test: /\.css$/,
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  modules: true,
                  localIdentName: '[name]__[local]__[hash:base64:5]'
                },
              },

And a snippet of my webpack config for prod:

    test: /\.css$/,
    loader: ExtractTextPlugin.extract(
      Object.assign(
        {
          fallback: {
            loader: require.resolve('style-loader'),
            options: {
              hmr: false,
            },
          },
          use: [
            {
              loader: require.resolve('css-loader'),
              options: {
                importLoaders: 1,
                minimize: true,
                sourceMap: shouldUseSourceMap,
                modules: true,
                localIdentName: '[name]__[local]__[hash:base64:5]',
              },
            },

A similar question asked here but the webpack config looks too different to implement the solution.

You can see in my Header.js I'm console.logging the classes obj I'm importing, but it's an empty object.

Any clues? Thank you!

208_man · Accepted Answer · 2018-05-25 18:14:47Z

0

Ok an answer for other silly people like me. Restart your build process after you install css-loader.

answered May 25, 2018 at 18:14

208_man

1,8088 gold badges41 silver badges72 bronze badges

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

Comments

Johnson Samuel · Accepted Answer · 2018-05-25 18:21:18Z

0

Can you please try this { test: /.css$/, loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name][local]_[hash:base64:5]' }

answered May 25, 2018 at 18:21

Johnson Samuel

2,0862 gold badges20 silver badges33 bronze badges

2 Comments

208_man Over a year ago

Thank you John but simply restarting my dev server fixed it. Silly error on my part.

Johnson Samuel Over a year ago

Happy to know :)

mahdi momeni · Accepted Answer · 2020-10-30 08:29:28Z

-1

Update your css-loader and style-loader

answered Oct 30, 2020 at 8:29

mahdi momeni

394 bronze badges

Collectives™ on Stack Overflow

When using css-loader, imported style object is empty

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related