web-dev-qa-db-ja.com

css-loaderが.cssファイルをインポートせずに空のオブジェクトを返す

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'],
}
reactjswebpackwebpack-style-loadercss-loader
9
Gopinath Shiva

これはおそらくあなたが使用していないのではないかと思います css-modules 。表示している例は、ローダーのcss-modules機能を実装する例です。

おそらく、?modulesクエリをcss-loader定義に追加してみてください。

9
Sean Larkin

あなたは3つの方法であなたの問題を解決することができます：

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 を使用します

4
Mohammad Rajabloo