I am trying to style a React Component. To achieve this, I am importing a CSS file and using className such as indicated in the React Documentation.
I have added a css-loader + style-loader to my webpack.config.js file as described below:
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'}
)]
}
Here is my App.js React Component:
import React, {Component} from "react"
import "./App.css"
const App = () => (
<div className="hello-world">Hello World</div>
)
export default App
And my App.css file:
.hello-world{
color: "#272C35"
}
My CSS content is correctly loaded since the property + value appear in the development tool. But for some reason, the value is marked as incorrect as shown below:
