React：CSS类名导入不起作用

Question

我<main>在react组件中有一个div，并且从类css文件中导入了一些类名，但是当我尝试在浏览器中检查它时，该类名没有集成到主div中。当我只是简单地使用其他类名时，它的工作方式就像，<main className="test">但是导入类是行不通的。

这是我的组件：

import React from 'react';
import Aux from '../../hoc/Aux';
import classes from './Layout.css';

const layout = (props) => (
<Aux>
    <div>
        Test paragraph
    </div>
    <main className={classes.Content}>
        {props.children}

    </main>
</Aux>
);

export default layout;

这是我的CSS

.Content{
   color: red;
   margin-top: 20px;
}

npm run eject创建后我做了命令，如果与webpack配置文件有关，请帮助我（弹出命令后我还没有进行任何更改）

这是webpack开发配置文件的css部分

{
        test: cssRegex,
        exclude: cssModuleRegex,
        use: getStyleLoaders({
          importLoaders: 1,
        }),
      },
      // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
      // using the extension .module.css
      {
        test: cssModuleRegex,
        use: getStyleLoaders({
          importLoaders: 1,
          modules: true,
          getLocalIdent: getCSSModuleLocalIdent,
        }),
 },

Answer 1

其实我是这样用的：

import classes from './Layout.module.css';

正如您在问题的文本中看到的：

// 使用扩展名 .module.css

Answer 2

import './Layout.css';

然后像普通的CSS一样使用它

<main className="Content">

您还可以使用以下格式将类用作对象：

在CSS文件中：
将类和ID换行:local(.className)

例
:local(.Content) { width: 100px; }

在您的React组件中：
import classes from './stylesheet.css'

<div className={classes.Content}></div>

Answer 3

您必须配置一些人员。按着这些次序：

1. npm run eject 在您的项目根目录中运行此命令

2. 搜索cssRegex并在下面添加以下行 use: getStyleLoaders({

       modules:true,
       localIdentName:'[name]__[local]__[hash:base64:5]'
   

享受！

Answer 4

您不需要指定文件的扩展名吗import classes from './layout.css';？

尝试安装style-loader并css-loader打包。然后将其添加到您的 webpack 中：

{
    test: /\.css$/,
    loaders: [
        'style-loader?sourceMap',
        'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
    ]
}

我从css-modules 文档中得到了 if ，我希望它能帮助您实现您所需要的。