My reactjs entry component setup looks like this:
import React from "react"
import ReactDOM from 'react-dom';
import App from "./js/components/App.js"
import './index.css';
ReactDOM.render(<App />, document.getElementById('root'));
In my css file, index.css, I am styling the root element:
#root {
background-color: brown;
height:100vh;
width:100vh;
}
However, the background color does not appear as brown when checking the browser's rendered styles. It seems that these attributes are not being applied to the root element.
This is the webpack configuration I am using:
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.html$/,
use: [
{
loader: "html-loader"
}
]
},
{
test: /\.css$/,
use: ['css-loader'],
},
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "./index.html"
})
]
};
It appears that the index.css file is not being loaded at all.