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'],
}
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 yourcss-loader
definition.