在我的 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】:尝试导入样式,然后将它们应用到 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>
);
【讨论】:
为什么?你改变了什么?你为什么改变它?这如何解决 OP 试图实现的目标?代码转储不是有用的答案。 仔细看。 你完全没有抓住重点。 “这样做:”不是答案。至少您现在已经通过编辑添加了一些最小的解释。不过,一点都不清楚,OP 并没有尝试做更多涉及的事情。以上是关于在我的 React 组件中使用 CSS 模块时 CSS className 没有反映的主要内容,如果未能解决你的问题,请参考以下文章
在 React 应用程序中使用启用 CSS 模块的 PrimeReact 主题