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

Question

这是我的 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"
}

这是我的 React 组件，我试图在其中实现 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 食谱 class 非常简单，它只是 -

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

但由于某些原因，CSS 更改未反映在 UI 中。

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

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

更改反映在 UI 中。所以我很确定 CSS 文件已在此处正确导入，但 className 属性似乎存在一些问题。那就是我所想的。谁能在这里指导我。

Answer 1

尝试导入样式，然后将它们应用到 div，使用 className="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>
      );
   }
}

Answer 2

解决方案 1

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

所以就像你在原版 HTML & CSS 中所做的那样，只需提供一个 class 你想使用的 css 属性并确保您只需像 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模块，即为css文件命名导入，如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]"
        }
      }
    ]
  }
};

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

CSS className not reflecting when using CSS Modules in my React Component

javascript

css

reactjs

webpack-dev-server

webpack-style-loader

解决方案 1

解决方案 2

index.js

webpack.config.js