我正在尝试设计一个React组件 . 为了实现这一点,我正在导入一个css文件并使用如ReactJs文档中所示的className .
我已经在我的webpack.config.js文件中添加了一个css-loader样式加载器,如下所述:
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已正确加载,因为属性值出现在开发工具中 . 但由于某种原因,该值被标记为不正确,如下所示:
1 回答
css文件中的颜色十六进制不需要引号 .