使用 css-loader 時，導入的樣式對象為空

Question

我正在嘗試使用 css-loader 從每個 react 組件的樣式表中導入樣式，但是我導入的對象是空的。 見代碼：

頭文件.js：

import React from 'react';
import classes from './Header.css';

const header = () => {
    console.log('classes obj', classes);

    return (
        <div className={classes.Header}>
            <h1>Title Goes Here</h1>
        </div>
    )
}


export default header;

這是我的 Header.css 文件：

.Header {
    background-color:  rgb(49, 118, 197);
}

這是我用於開發的 webpack 配置的片段：

test: /\.css$/,
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  modules: true,
                  localIdentName: '[name]__[local]__[hash:base64:5]'
                },
              },

以及我的 prod 的 webpack 配置片段：

    test: /\.css$/,
    loader: ExtractTextPlugin.extract(
      Object.assign(
        {
          fallback: {
            loader: require.resolve('style-loader'),
            options: {
              hmr: false,
            },
          },
          use: [
            {
              loader: require.resolve('css-loader'),
              options: {
                importLoaders: 1,
                minimize: true,
                sourceMap: shouldUseSourceMap,
                modules: true,
                localIdentName: '[name]__[local]__[hash:base64:5]',
              },
            },

這里提出了一個類似的問題，但 webpack 配置看起來太不同，無法實現解決方案。

您可以在我的 Header.js 中看到我在 console.logging 我正在導入的類 obj，但它是一個空對象。

有什么線索嗎？ 謝謝！

Answer 1

你應該

import './Header.css'

然后對於組件：

<div className="Header">... </div>

Answer 2

對於像我這樣的其他愚蠢的人來說，好的答案。 安裝 css-loader 后重新啟動構建過程。

Answer 3

你能試試這個 { test: /.css$/, loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name] [local]_ [hash:base64:5]' }

Answer 4

更新你的css-loader和style-loader