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

【问题标题】：react & webpack4 background-size not work反应和 webpack 4 背景大小不起作用
【发布时间】：2019-09-23 17:45:59
【问题描述】：

我是使用 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;
      }

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

【问题讨论】：

标签： reactjs webpack sass webpack-file-loader

【解决方案1】：

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

代替：

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

定义背景图像：

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

【讨论】：

非常感谢。我犯了一个简单的错误。