Css-loader does not import .css file returning empty object

Question

Import style from css files. Return an empty object. Css-loader seems to be working incorrectly. Can anyone help me on this. Please find the help files below.

index.js

import React from 'react'   
import style from './header.css'

console.log(style) // Returning empty object

export default class Header extends React.PureComponent {
  render() {
    return(
      <header className = {style.header}>
        This is header component
      </header>
    )
  }
}

./header.css

.header {
  background: #007DC6;
}

./webpack.config.js

{
  test: /\.css$/,
  exclude: /node_modules/,
  loaders: ['style-loader', 'css-loader'],
}, {
  test: /\.css$/,
  include: /node_modules/,
  loaders: ['style-loader', 'css-loader'],
}

Answer 1

I wonder if it is possible that you are not using css-modules . The example you show is an example of the implementation of the loader's css-modules function.

Perhaps try adding a query ?modulesto your definition css-loader.