反应和 webpack 4 背景大小不起作用

Question

我刚开始使用 React 环境设置 webpack。我现在遇到的问题是 background-size 和 background image 不适用于我在 React 组件中设置的背景图像。当我在同一个文件中设置背景图像和背景大小和位置时，它起作用了。换句话说，当我在组件中设置图像，并在 scss 中定义背景大小和位置时，它不起作用。我相信我的 webpack 设置导致了这个问题。

-webpack-

  {
    test: /\.css$/,
    use: ['style-loader', 'css-loader'],
  },
  {
    test: /\.s[ac]ss/i,
    use: ['style-loader', 'css-loader', 'sass-loader'],
  },
  {
    test: /\.(png|svg|jpg|gif)$/,
    use: ['file-loader'],
  },

-分量-

  <div className="image"
    style={{
      background: `url(${imageUrl})`,
    }}/>

-scss-

.image {
        width: 100%;
        height: 95%;
        background-size: cover;
        background-position: center;
        margin-bottom: 5px;
      }

用这个源，我得到的结果是显示了图片，但是图片没有覆盖。

Answer 1

图像未覆盖，因为您使用内联 background 默认样式覆盖了背景属性。请记住，内联样式在这里具有最高的优先级。

而不是：

<div className="image"
    style={{
    background: `url(${imageUrl})`,
}}/>

定义背景图像：

<div className="image"
    style={{
    background-image: `url(${imageUrl})`,
}}/>

反应和 webpack 4 背景大小不起作用

react & webpack4 background-size not work

sass

reactjs

webpack

webpack-file-loader