CSS Loader没有导入.css文件，返回空对象。

Question

导入CSS文件样式。返回空对象。似乎css-loader没有正确工作。有人能帮我吗？请在下面找到参考文件。

index.js

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

- Gopinath Shiva

Answer 1

我想知道您是否没有使用CSS模块化。您展示的示例是实现加载器的CSS模块化功能的示例。

尝试在您的css-loader定义中添加?modules查询。

- Sean Larkin

---

将?modules查询添加到css-loader中即可解决问题。感谢您的答案。 - Gopinath Shiva

你能展示一下如何准确地使用模块吗？我遇到了同样的问题。谢谢。 - iphonic

@GopinathShiva，您能否展示一下您是如何解决这个问题的？ - darksoulsong

@darksoulsong，我已经在webpack模块定义中为“test : /.css$/”添加了css-loader查询，像这样：loaders: ['style-loader', 'css-loader?modules=true&camelCase=true']。 - Gopinath Shiva

@GopinathShiva 像魔法一样好用。谢谢！ - darksoulsong

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

- Mohammad Rajabloo

---

我正在尝试第二种方法。但是似乎无法使其工作。如果我从文件中导入样式，然后使用styles.classname，它就可以正常工作。我是React的新手。我到底做错了什么？ - Rohan Shenoy

看这里 @RohanShenoy，在第二种方法中，header.css 文件中的所有样式都会附加到最终项目中，这不是模块化的。我建议你遵循这个页面：https://create-react-app.dev/docs/adding-a-css-modules-stylesheet - Mohammad Rajabloo

嗨@Mohammad。非常感谢您的回复。是的，您说得对，我遇到了问题，因为它是模块化的。 - Rohan Shenoy