嵌套 类 无法在 CSS 模块中使用 webpack
Nested classes not working in CSS Modules with webpack
我正在使用 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 (
<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 时,我可以看到轮播 class 及其属性进入父级 div。但是子 img 标签显示 class 名称,但没有 属性 与之关联。
知道我在这里做错了什么吗?
编辑: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-嵌套包。
您如何导入 css 文件?
您也可以按照以下方式导入,
在你的组件中,
import ‘styles.css’
在HTML元素中,
<div className='carousel'>
<div className='test'></div>
</div>
在 webpack 配置中,
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
我正在使用 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 (
<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 时,我可以看到轮播 class 及其属性进入父级 div。但是子 img 标签显示 class 名称,但没有 属性 与之关联。
知道我在这里做错了什么吗?
编辑: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-嵌套包。
您也可以按照以下方式导入,
在你的组件中,
import ‘styles.css’
在HTML元素中,
<div className='carousel'>
<div className='test'></div>
</div>
在 webpack 配置中,
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}