[英]Invalid Property Value on css style using imported css file in react
我正在嘗試設計一個React組件。 為了實現這一點,我正在導入一個css文件並使用如ReactJs文檔中所示的className 。
我已經在我的webpack.config.js文件中添加了一個css-loader + style-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已正確加載,因為屬性+值出現在開發工具中。 但由於某種原因,該值被標記為不正確,如下所示:
css文件中的顏色十六進制不需要引號。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.