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

score 16 · Accepted Answer · answered Dec 23 '16 at 07:45

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 '16 at 07:45

Sean Larkin

6,290
1
28
43

adding ?modules query to css-loader solve the issue. Appreciate the answer – Gopinath Shiva Dec 23 '16 at 09:37
2

Can you show how exactly use modules, I am facing the same problem?. Thanks. – iphonic Jun 22 '17 at 09:09
@GopinathShiva Can you please show us what you did to solve this? – darksoulsong Jul 19 '17 at 20:03
2

@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']` – Gopinath Shiva Jul 20 '17 at 06:02
@GopinathShiva Worked like a charm. Thank you! – darksoulsong Jul 21 '17 at 13:37

Mohammad Rajabloo · Answer 2 · 2020-07-21T21:24:02.410

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 '20 at 21:24

answered Jul 09 '18 at 20:19

Mohammad Rajabloo

2,567
19
20

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? – Rohan Shenoy Oct 10 '20 at 06:44
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: https://create-react-app.dev/docs/adding-a-css-modules-stylesheet – Mohammad Rajabloo Oct 11 '20 at 11:55
Hi @Mohammad. Thanks a lot for the reply. Yes you're right I got the issue because it was modular. – Rohan Shenoy Oct 11 '20 at 16:33

css-loader not importing .css file returning empty object

2 Answers2

Linked