在我的 React 组件中使用 CSS 模块时，CSS className 不反映 [英] CSS className not reflecting when using CSS Modules in my React Component

问题描述

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

 模块:{装载机: [{测试:/\.jsx?$/,排除:/node_modules/，//加载器: 'babel',loader: 'babel-loader',询问: {预设:['es2015'，'反应']}},{测试:/\.css$/,loader:'style-loader!css-loader'}]}

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

"devDependencies": {"css-loader": "^0.28.10",样式加载器":^0.20.3"}

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

从react"导入React；从./Foodrecipe.css"导入样式；导出默认类 Foodrecipe 扩展 React.Component {使成为() {返回 (<div className={styles.recipe}><h1>健康主菜食谱</h1>

);}}

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

.recipe{背景颜色:黄色；颜色:蓝色；}

但出于某种原因，CSS 更改并未反映在 UI 中.

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

#recipeDiv {背景颜色:黄色；颜色:蓝色；}

更改反映在用户界面中.所以我很确定 CSS 文件在这里被正确导入，但 className 属性似乎存在一些问题.那就是我所想的.任何人都可以在这里指导我.

解决方案

解决方案 1

您试图在不使用 CSS 模块的情况下将 css 文件导入为 styles.如果您想这样做，请查看解决方案 2.

就像你在普通 HTML 中所做的一样 &CSS，只需给出一个 class 你想要使用的 css 属性 &确保你只是像 import './Foodrecipe.css' 一样导入它.

从react"导入React；导入./Foodrecipe.css"；导出默认类 Foodrecipe 扩展 React.Component {使成为() {返回 (<div className="食谱"><h1>健康主菜食谱</h1>

);}}

解决方案 2

在 css-loader 中使用 query: { modules: true } 将其用作 CSS Modules，即，为类似 import 样式的 css 文件命名导入来自'./FoodRecipe.css'

index.js

从react"导入React；从./Foodrecipe.css"导入样式；导出默认类 Foodrecipe 扩展 React.Component {使成为() {返回 (<div className={styles.recipe}><h1>健康主菜食谱</h1>

);}}

webpack.config.js

const path = require("path");模块.出口 = {条目:["./src/test.js"],输出: {路径:path.resolve(__dirname, "dist"),文件名:engine.js"},模块: {规则: [{测试:/\.js$/,loader: "babel-loader",排除:/(节点模块)/，询问: {预设:[es2015"，stage-2"]}},{测试:/\.css$/,装载机:风格装载机"},{测试:/\.css$/,加载器:css-加载器"，询问: {模块:真实，localIdentName: "[name]__[local]___[hash:base64:5]"}}]}};

This is the module section of my webpack.config.js file

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

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

I have also installed css-loader and style-loader, this is how the package.json file looks -

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

This is my react component where I am trying to implement the 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>
      );
   }
}

The CSS recipe class in Foodrecipe.css file is quite simple, its just -

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

But for some reason, the CSS change is not reflecting in the UI.

One more thing I would like to point out is when I am adding the attribute id to the div and naming it recipeDiv, and declaring the style of the id in the CSS -

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

the changes are reflecting in the UI. So I am pretty sure that the CSS file is getting imported correctly here but there seems to be some issue with className attribute. That's what I think. Can anyone guide me here.

解决方案

Solution 1

You are trying to import css file as styles without using CSS Modules. Check Solution 2 if you want to do it like that.

So just like you do in vanilla HTML & CSS, just give a class whose css property you want to use & make sure you just import it like 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>
      );
   }
}

Solution 2

Use query: { modules: true } in css-loader to use it as CSS Modules, i.e, named import for a css file like import styles from './FoodRecipe.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]"
        }
      }
    ]
  }
};

这篇关于在我的 React 组件中使用 CSS 模块时，CSS className 不反映的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！