Question

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

我正在尝试在CSS文件index.css的根元素中设置样式：

  #root {

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

背景不是棕色。当查看浏览器的样式时，我看不到将任何这些属性应用于根元素。

这是我的webpack配置：

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

您无法设置应用程序#root的样式。只需设置className组件的<App />的样式，例如：

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

css文件：

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

Answer 2

使用webpack时，我认为您必须像这样指定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 */
...
...

使用CSS文件设置根元素的样式，但不起作用

2 个答案: