我正在尝试设计 React 组件的样式。为了实现这一点,我导入一个 CSS 文件并使用 className,如 React 文档中所示。
我已将 css-loader + style-loader 添加到我的 webpack.config.js 文件中,如下所述:
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: "development",
entry: "../src/index.js",
output: {
path: path.resolve(__dirname, "../dist"),
filename: "bundle.js",
},
devtool: 'inline-source-map',
devServer: {
contentBase: '../dist',
port: 8080
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},
plugins: [new HtmlWebpackPlugin(
{template: '../src/index.html'}
)]
}
这是我的 App.js React 组件:
import React, {Component} from "react"
import "./App.css"
const App = () => (
<div className="hello-world">Hello World</div>
)
export default App
还有我的 App.css 文件:
.hello-world{
color: "#272C35"
}
由于属性+值出现在开发工具中,我的CSS内容已正确加载。但由于某种原因,该值被标记为不正确,如下所示: