Стиль корневого элемента с использованием файла CSS, но не работает

Question

У меня есть компонент ввода в activjs:

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

Я пытаюсь стилизовать корневой элемент внутри моего CSS-файла, index.css:

  #root {

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

Фон не коричневый. При просмотре стилей, которые отображает браузер, я не вижу ни одного из этих атрибутов, применяемых к корневому элементу.

Это мой конфиг веб-пакета:

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"
    })
  ]
};

Как будто он вообще не загружает файл index.css.

Answer 1

При использовании веб-пакета, я думаю, вы должны указать точки входа в ваши файлы CSS / JS, как это ...

entry: [
        "./src/js/index.js",
        "./src/sass/style.scss",
    ],
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, 'assets/js')
    },
    module: {
        rules: [
/* you code here */
...
...

Answer 2

Вы не можете стилизовать #root вашего приложения.Просто введите стиль className из <App /> компонента, например:

const App = () => (
  <div className="app>
  // ...
  </div>
)

css файл:

.app {
  background-color: #ffffff;
  background-color: brown;
  height:100vh;
  width:100vh;
}