css-loader not importing .css file returning empty object

Question

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'],
}

Sean Larkin · Accepted Answer · 2016-12-23 07:45:09Z

16

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.

answered Dec 23, 2016 at 7:45

Sean Larkin

6,4401 gold badge31 silver badges43 bronze badges

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

4 Comments

Gopinath Shiva Over a year ago

adding ?modules query to css-loader solve the issue. Appreciate the answer

iphonic Over a year ago

Can you show how exactly use modules, I am facing the same problem?. Thanks.

darksoulsong Over a year ago

@GopinathShiva Can you please show us what you did to solve this?

Gopinath Shiva Over a year ago

@darksoulsong , I have added css-loader query to the webpack module definition for "test : /\.css$/" like this, loaders: ['style-loader', 'css-loader?modules=true&camelCase=true']

Mohammad Rajabloo · Accepted Answer · 2020-07-21 21:24:02Z

7

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

edited Jul 21, 2020 at 21:24

answered Jul 9, 2018 at 20:19

Mohammad Rajabloo

2,9631 gold badge21 silver badges20 bronze badges

3 Comments

Rohan Shenoy Over a year ago

I'm trying the 2nd method. But I can't seem to make it work. If I do import styles from file and the use stles.classname then it work. I'm new to react. What exactly I'm doing wrong?

Mohammad Rajabloo Over a year ago

look @RohanShenoy, in the second method all styles in header.css file will attach to the final project and it's not modular, I suggest you follow this page: create-react-app.dev/docs/adding-a-css-modules-stylesheet

Rohan Shenoy Over a year ago

Hi @Mohammad. Thanks a lot for the reply. Yes you're right I got the issue because it was modular.

Collectives™ on Stack Overflow

css-loader not importing .css file returning empty object

2 Answers 2

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related