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

【问题标题】：css-loader not importing .css file returning empty objectcss-loader 不导入 .css 文件返回空对象
【发布时间】：2017-05-08 21:11:09
【问题描述】：

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

【问题讨论】：

标签： reactjs webpack webpack-style-loader css-loader

【解决方案1】：

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

#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

【讨论】：

我正在尝试第二种方法。但我似乎无法让它工作。如果我确实从文件中导入样式并使用 stles.classname 那么它可以工作。我是新来的反应。我到底做错了什么？
看@RohanShenoy，在第二种方法中，header.css 文件中的所有样式都将附加到最终项目，它不是模块化的，我建议你关注这个页面：create-react-app.dev/docs/adding-a-css-modules-stylesheet
嗨@Mohammad。非常感谢您的回复。是的，你是对的，我遇到了问题，因为它是模块化的。

【解决方案2】：

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

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

【讨论】：

添加 ?modules 查询到 css-loader 解决了这个问题。欣赏答案
你能说明如何使用模块，我也面临同样的问题吗？谢谢。
@GopinathShiva 你能告诉我们你做了什么来解决这个问题吗？
@darksoulsong ，我在 webpack 模块定义中添加了 css-loader 查询，用于“test : /\.css$/”，就像这样，loaders: ['style-loader', 'css-loader?modules=true&camelCase=true']
@GopinathShiva 工作就像一个魅力。谢谢！