Question

我正在尝试使用css-loader从每个react组件的样式表中导入样式，但是我导入的对象是空的。见代码：

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

我的webpack配置片段为prod：

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

类似的问题问here，但webpack配置看起来太不同了，无法实现解决方案。

你可以在我的Header.js中看到我是console.logging我正在导入的类obj，但它是一个空对象。

任何线索？谢谢！

Answer 1

你应该

import './Header.css'

然后是组件：

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

Answer 2

对于像我这样的其他愚蠢的人来说，这是一个答案。安装css-loader后重新启动构建过程。

Answer 3

请你试试这个{ 测试：/.css$/, loader：＆＃39; style！css-loader？modules＆amp; importLoaders = 1＆amp; localIdentName = [name] [local] _ [hash：base64：5]＆＃39; }

Answer 4

更新您的css-loader和style-loader

使用css-loader时，导入的样式对象为空

4 个答案: