reactjs - 嵌套类在带有 webpack 的 CSS 模块中不起作用
问题描述
我使用 webpack 和 css-loader 和 style-loader 在我的 React 应用程序中启用 css 模块。这些是以下设置:
网络包配置:
module.exports = {
mode: "development",
entry: __dirname + "/app/index.js",
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.css$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
modules: true,
localIdentName: "[name]__[local]___[hash:base64:5]"
}
}
]
}
]
},
output: {
filename: "bundle.js",
path: __dirname + "/build"
},
plugins: [HTMLWebpackPluginConfig]
};
在我的 React 组件中,我编写了以下代码:
import React from "react";
import styles from "./Carousel.css";
class Carousel extends React.Component {
render() {
return (
<div className={styles["carousel"]}>
<img
className={styles["test"]}
src="https://i2.wp.com/beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg?resize=640%2C426"
/>
</div>
);
}
}
export default Carousel;
在我的 Carousel.css 文件中:
.carousel {
background-color: red;
.test {
width: 200px;
}
}
当我检查渲染的 HTML 时,我可以看到轮播类及其属性进入父 div。但是子 img 标签显示了类名,但没有与之关联的属性。
知道我在这里做错了什么吗?
编辑:: Sam 的建议奏效了,我总结了解决它的变化:
由于嵌套是 css 的一个特性,我们需要使用 sass 或更少。为此,我使用了 postcss-loader。
更新了 webpack 配置规则部分:
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.css$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
modules: true,
localIdentName: "[name]__[local]___[hash:base64:5]"
}
},
*"postcss-loader"*
]
}
还添加了一个 postcss.config.js 文件,如下所示:
module.exports = {
plugins: [
require("postcss-nested")({
/* ...options */
})
]
};
并使用 npm install -D 选项添加了 postcss-loader、postcss-nested 包。
解决方案
推荐阅读
- python - 加载不带文本限定符的字典
- machine-learning - 序列预测 ML 任务使用哪个指标?
- spring - 如何使用(Spring Boot + JPA)跟踪当前处于活动状态的同一数据库上的多个连接
- jquery - 如何使用 attr() 在 jQuery 中定义多个 CSS 属性
- ruby-on-rails - 在 ruby on rails 上重命名上传文件
- string - 如何将两个列表转换成字符串格式 Flutter
- kubernetes - Prometheus 获取度量的初始时间
- groovy - Groovy - 在另一个 ArrayList 中存在相同数组的情况下过滤 ArrayList
- python - 气流调度程序不遵守时间表
- spring - 为什么本机查询在以下第二个查询中不起作用?