我使用webpack和css-loader以及style-loader在我的React应用程序中启用css模块 . 这些是以下设置：
Webpack配置：
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 (
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"
/>
);
}
}
export default Carousel;
在我的Carousel.css文件中：
.carousel {
background-color: red;
.test {
width: 200px;
}
}
当我检查渲染的HTML时，我可以看到carousel类及其属性来自父div . 但是，子img标签显示了类名，但没有与之关联的属性 .
知道我在这里做错了吗？
EDIT:: Sam's suggestions worked and Im summarising the changes that solved it:
由于嵌套是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包 .
360
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
