在我的 React 组件中使用 CSS 模块时 CSS className 没有反映

Posted

技术标签:

【中文标题】在我的 React 组件中使用 CSS 模块时 CSS className 没有反映【英文标题】:CSS className not reflecting when using CSS Modules in my React Component 【发布时间】:2018-08-19 03:38:27 【问题描述】:

这是我的 webpack.config.js 文件的模块部分

  module: 
      loaders: [
         
            test: /\.jsx?$/,
            exclude: /node_modules/,
            // loader: 'babel',
            loader: 'babel-loader',

            query: 
               presets: ['es2015', 'react']
            
         ,
         
           test: /\.css$/,
           loader:'style-loader!css-loader'
         
      ]
   

我还安装了 css-loader 和 style-loader,这是 package.json 文件的样子 -

"devDependencies": 
    "css-loader": "^0.28.10",
    "style-loader": "^0.20.3"

这是我尝试实现 CSS 的反应组件 -

import React from "react";
import styles from "./Foodrecipe.css";

export default class Foodrecipe extends React.Component 
   render() 
      return (
         <div className=styles.recipe>
            <h1>Healthy Main Dish Recipes</h1>
         </div>
      );
   

Foodrecipe.css 文件中的 CSS 食谱类非常简单,它只是 -

.recipe
  background-color: yellow;
  color: blue;

但由于某种原因,CSS 更改并未反映在 UI 中。

我想指出的另一件事是,当我将属性 id 添加到 div 并将其命名为 recipeDiv,并在 CSS 中声明 id 的样式时 -

#recipeDiv 
  background-color: yellow;
  color: blue;

这些变化反映在 UI 中。所以我很确定 CSS 文件在这里被正确导入,但 className 属性似乎存在一些问题。那就是我所想的。任何人都可以在这里指导我。

【问题讨论】:

@T.J.Crowder 我是 React 新手,我正在尝试使用 React 和 Webpack 实现 CSS 模块。 CSS Modules 的优点之一是,它允许我们编写作用域 CSS。我们可以为一个组件编写 CSS 并确保它不会泄漏到其他组件中。 @T.J.Crowder 是的,我更新了我的问题标题。以便将来面对这个问题的人可以确切地知道这个问题的全部意义。 【参考方案1】:

解决方案 1

您正在尝试在不使用 CSS 模块的情况下将 css 文件导入为 styles。如果您想这样做,请检查解决方案 2

因此,就像您在普通 html 和 CSS 中所做的那样,只需提供您要使用其 css 属性的 class 并确保您像 import './Foodrecipe.css' 一样导入它。

import React from "react";
import "./Foodrecipe.css";

export default class Foodrecipe extends React.Component 
   render() 
      return (
         <div className="recipe">
            <h1>Healthy Main Dish Recipes</h1>
         </div>
      );
   

解决方案 2

css-loader 中使用query: modules: true 将其用作CSS 模块,即为import styles from './FoodRecipe.css' 之类的css 文件命名导入

index.js

import React from "react";
import styles from "./Foodrecipe.css";

export default class Foodrecipe extends React.Component 
   render() 
      return (
         <div className=styles.recipe>
            <h1>Healthy Main Dish Recipes</h1>
         </div>
      );
   

webpack.config.js

const path = require("path");

module.exports = 
  entry: ["./src/test.js"],

  output: 
    path: path.resolve(__dirname, "dist"),
    filename: "engine.js"
  ,

  module: 
    rules: [
      
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /(node_modules)/,
        query: 
          presets: ["es2015", "stage-2"]
        
      ,
      
        test: /\.css$/,
        loader: "style-loader"
      ,
      
        test: /\.css$/,
        loader: "css-loader",
        query: 
          modules: true,
          localIdentName: "[name]__[local]___[hash:base64:5]"
        
      
    ]
  
;

【讨论】:

但是我所经历的例子都是这样做的,他们将文件作为样式导入。为什么它对他们有用而不对我有用?这是其中一个示例:javascriptplayground.com/css-modules-webpack-react @Rito 你的模块配置和文章里的不一样 您需要为此使用 css-modules。结帐medium.com/@sapegin/… 了解更多信息。请注意,您只需要在 css-loader 配置中使用 modules:true 即可。不确定,因为我从来没有这样做过。 @deadcoder0904 你是对的,缺少的部分是 modules: true。这是我在 webpack 配置文件中所做的更改,它对我有用。非常感谢。您能否使用此信息更新您的答案,以便我批准。 @T.J.Crowder 除了我上面分享的文章链接,你也可以查看这篇文章,它也说了同样的话。 javascriptstuff.com/css-modules-by-example/…【参考方案2】:

尝试导入样式,然后将它们应用到 divclassName="recipe" 而不是:className=styles.recipe

这样做:

import React from "react";
import "./Foodrecipe.css";

export default class Foodrecipe extends React.Component 
   render() 
      return (
         <div className="recipe">
            <h1>Healthy Main Dish Recipes</h1>
         </div>
      );
   

【讨论】:

为什么?你改变了什么?你为什么改变它?这如何解决 OP 试图实现的目标?代码转储不是有用的答案。 仔细看。 你完全没有抓住重点。 “这样做:”不是答案。至少您现在已经通过编辑添加了一些最小的解释。不过,一点都不清楚,OP 并没有尝试做更多涉及的事情。

以上是关于在我的 React 组件中使用 CSS 模块时 CSS className 没有反映的主要内容,如果未能解决你的问题,请参考以下文章

在 React 应用程序中使用启用 CSS 模块的 PrimeReact 主题

如何忽略 Next.js 组件中导致单元测试中的解析错误的 CSS 模块导入

节点模块的 CSS

未找到带有故事书模块的 CSS 模块

Sass 与 CSS 模块和 Webpack

React 编译失败。找不到模块:无法解析“Main.css”