Css React/Webpack将样式应用于标记而不是类/id

我已经从一些教程中设置了我自己的react项目，包括我自己的网页配置。当我尝试为元素设置样式时，它能够将样式应用于通用html标记，例如

或

，但当我尝试为类/ID设置样式时，它失败了

我知道我的css文件正在导入，因为它设置了通用标记的样式

网页包配置

{
    test: /\.css$/,
    use: [
        "style-loader",
        {
            loader:"css-loader",
            options:{
                modules:true
            }
        }
    ]
}

CSS

反应

结果

在我的示例中，

是红色的，但是

.oakResults

字体不会改变，并且当我注释掉

样式时，它不会变为红色

---

我希望它能够同时设置通用标记和类/id的样式。

我认为这个问题的原因是您启用了css，但没有正确引用css

因此，如果您不需要css模块，请尝试从您的网页配置中删除

选项：{modules:true}

。然后css可以应用于您在ReactJS中设置的类名

或者，如果您确实需要css模块，请保留Webpack配置。但将您的ReactJS修改为以下内容：

import React, { Component } from 'react';
import styles from 'path\to\file.css';

class foo extend Component {
  render() {
    return (<div classname={styles.oakResults}> This is the test component</div>)
  }
}

import React，{Component}来自'React'；
从“path\to\file.css”导入样式；
类foo扩展组件{
render（）{
返回（这是测试组件）
}
}

希望有帮助。

你应该试试这个

{
    test: /\.css$/,
    use: ["style-loader", "css-loader"]
}

从

模块选项启用/禁用CSS模块规范和设置基本行为

使用

false

value可以提高性能，因为我们避免解析CSS模块特性，这对于使用普通CSS或使用其他技术的开发人员非常有用

---

请参阅更多信息。

我需要更多详细信息。如果应用了oakResults样式，是否可以签入inspect元素。检查应用的内容。我在想它可能被其他风格所覆盖。嗨，stefan，读这篇-，试着结束这个问题。

import React, { Component } from 'react';
import styles from 'path\to\file.css';

class foo extend Component {
  render() {
    return (<div classname={styles.oakResults}> This is the test component</div>)
  }
}

{
    test: /\.css$/,
    use: ["style-loader", "css-loader"]
}