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!

score 0 · Answer 1 · answered May 25 '18 at 18:14

0

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

answered May 25 '18 at 18:14

208_man

1,440
3
28
59

score 0 · Answer 2 · answered May 25 '18 at 18:21

0

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

answered May 25 '18 at 18:21

Johnson Samuel

2,046
2
18
29

Thank you John but simply restarting my dev server fixed it. Silly error on my part. – 208_man May 26 '18 at 21:24
Happy to know :) – Johnson Samuel May 27 '18 at 02:06

score -1 · Answer 3 · answered Oct 30 '20 at 08:29

-1

Update your css-loader and style-loader

answered Oct 30 '20 at 08:29

mahdi momeni

39
4

When using css-loader, imported style object is empty

3 Answers3