React/Webpack 将样式应用于标签而不是类/ID答案

【问题标题】：React/Webpack applying styles to tags but not classes/idsReact/Webpack 将样式应用于标签而不是类/ID
【发布时间】：2019-12-15 16:39:09
【问题描述】：

我已经根据一些教程设置了我自己的 react 项目，包括我自己的 webpack 配置。当我尝试设置元素样式时，它可以将样式应用于通用 html 标签，例如 <body> 或 <p>，但当我尝试设置类/ID 样式时它会失败。

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

Webpack 配置

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

CSS

.oakResults {
    font-size:20px;
}

#yoyoyo {
    color:red;
}

p {
    color:orange;
}

反应

<div className='oakResults'>
    <p id='yoyoyo'>Results</p>
</div>

在我的示例中，<p> 是红色的，但 .oakResults 字体不会改变，当我注释掉 <p> 样式时它不会变成红色。

我希望它能够为通用标签和类/ID设置样式。

【问题讨论】：

我需要更多详细信息。如果正在应用 OakResults 样式，您能否签入检查元素。检查应用了什么。我在想也许它被其他样式覆盖了。
嗨 stefan，请阅读此内容 - stackoverflow.com/help/someone-answers，然后尝试关闭问题。

标签： css reactjs webpack

【解决方案1】：

你应该试试这个，

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

来自docs，

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

使用 false 值可以提高性能，因为我们避免解析 CSS 模块功能，这对于使用 vanilla css 或使用其他技术的开发人员很有用。

请参阅有关CSS Modules 的更多信息。

【讨论】：

【解决方案2】：

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

因此，如果您不需要 css 模块，请尝试从您的 webpack 配置中删除 options:{ 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>)
  }
}

希望对你有帮助。

【讨论】：