css-loader not importing .css file returning empty object

Importing style from css files. Returning empty object. Seems css-loader is not working correctly. Can anyone help me on this. Please find the reference 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'],
}

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

I wonder if this is perhaps you are not using css-modules. The example you are showing there is an example of implementing the css-modules feature of the loader.

Perhaps try adding the ?modules query to your css-loader definition.

Method 2

You can fix your problem with three ways :

#1:
Replace 'css-loader' with 'css-loader?modules=true&camelCase=true'

#2:
Do old school like this :

##index.js

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

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

#3:
use babel-plugin-react-css-modules or React CSS Modules


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x