реагировать & webpack4 фоновый размер не работает - PullRequest
Новая
       17

реагировать & webpack4 фоновый размер не работает

0 голосов
/ 23 сентября 2019

Я новичок в настройке веб-пакета со средой React.У меня сейчас проблема в том, что размер фона и фоновое изображение не работают для фонового изображения, которое я установил в компоненте реакции.Это сработало, когда я установил background-image и background-size и положение в одном файле.другими словами, когда я устанавливаю изображение в компоненте и определяю размер фона и положение в scss, это не работает.Я полагаю, что мои настройки веб-пакетов вызвали эту проблему.

-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'],
  },

-component- 

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

-scss- 

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

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

1 Ответ

0 голосов
/ 24 сентября 2019

Изображение не распространяется, потому что вы переопределяете свойства фона встроенными background стилями по умолчанию.Помните, что встроенный стиль имеет наибольший приоритет.

Вместо: 

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

определение background-image: 

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