css-loader不导入返回空对象的.css文件

Question

从css文件导入样式.返回空对象.似乎css-loader无法正常工作.谁可以帮我这个事.请在下面找到参考文件

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

我想知道这可能是你没有使用css-modules.您展示的示例是实现加载程序的css-modules功能的示例.

也许尝试将?modules查询添加到您的css-loader定义中.

Answer 2

您可以通过三种方式解决您的问题：

#1：替换'css-loader'为'css-loader?modules=true&camelCase=true'

＃2：像这样做旧学校：

##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: 使用babel-plugin-react-css-modules或React CSS Modules