代码之家 › 专栏 › 技术社区 › Rito

在我的React组件中使用CSS模块时,CSS类名不反映

webpack-style-loader webpack-dev-server reactjs css javascript

Rito · 技术社区 · 6 年前

这是我的网页的模块部分。配置。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加载器和样式加载器,这是如何打包的。json文件外观-

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

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

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 recipe类。css文件非常简单-

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

但由于某些原因,CSS的变化并没有反映在UI中。

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

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

这些变化反映在UI中。因此,我非常确定CSS文件在这里得到了正确导入,但className属性似乎存在一些问题。我就是这么想的。有人能在这里指引我吗。

2 回复 | 直到 6 年前

deadcoder0904 6 年前

解决方案1

您正在尝试导入 css 文件为 styles 不使用CSS模块。检查 解决方案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

使用 query: { modules: true } 在里面 css-loader 将其用作CSS模块,例如,为CSS文件命名为import,如 import styles from './FoodRecipe.css'

指数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>
      );
   }
}

网页包。配置。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]"
        }
      }
    ]
  }
};

baeyun 6 年前

尝试导入样式,然后将其应用于 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>
      );
   }
}