Style root element using css file, but not working

Ask a question
1

I have the entry component in reactjs:

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'));

I am trying to style in the root element inside of my css file, index.css:

#root {

    background-color: brown;
    height:100vh;
    width:100vh;
  }

The background though is not brown. When looking at the styling the browser renders I cannot see any of these attributes being applied to the root element.

This is my webpack config:

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 is as if it is not loading the index.css file at all.

Coin iconoffer bounty
add comment

0 Answer

Your Answer