Style root element using css file, but not working

Ask a question+

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;

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.

add comment

0 Answer

Your Answer