我使用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时,我可以看到传送带类和它的属性进入父div。 但孩子img标签显示类名称,但没有属性与它关联。
任何想法我在这里做错了什么?
编辑::山姆的建议工作,我总结了解决它的变化:
由于嵌套是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包。
Im using webpack and css-loader and style-loader to enable css modules in my React app. These are the following setup:
Webpack config:
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] };And in my React component I've coded this:
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;In my Carousel.css file:
.carousel { background-color: red; .test { width: 200px; } }When I check the rendered HTML, I can see carousel class and its properties coming in the parent div. But the child img tag shows the class name but no property is associated with it.
Any idea what Im doing wrong here?
EDIT:: Sam's suggestions worked and Im summarising the changes that solved it:
Since nesting is a feature of css, we need to use sass or less. And for that I used postcss-loader.
Updated webpack config rules section:
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"* ] }Also added a postcss.config.js file like this:
module.exports = { plugins: [ require("postcss-nested")({ /* ...options */ }) ] };And added postcss-loader, postcss-nested packages using npm install -D option.
最满意答案
你如何导入的CSS文件?
你也可以按照下面的方式导入,
在你的组件中,
import'styles.css'
在HTML元素中,
> <div className='carousel'> <div className='test'></div> </div>在webpack配置中,
{test:/.css$/,use:['style-loader','css-loader']}
How are you importing the css file ?
You can follow the below way to import too,
In your component,
import ‘styles.css’
In HTML element,
> <div className='carousel'> <div className='test'></div> </div>In webpack config,
{ test: /.css$/, use: [ 'style-loader', 'css-loader' ] }
更多推荐
css,test,React,postcss-loader,class,电脑培训,计算机培训,IT培训"/> <meta name
发布评论