Ошибка разбора модуля при попытке загрузить фоновое изображение в элементе css - PullRequest
Новая
       11

Ошибка разбора модуля при попытке загрузить фоновое изображение в элементе css

0 голосов
/ 19 мая 2019

Может быть уместно заметить, что я использую Next.js, который уже был привередлив с файлами CSS (имея необходимость npm install @zeit/next-css только для того, чтобы иметь возможность импортировать файлы CSS на страницы JavaScript).

Итак, есть специальный Panel элемент от стороннего API, который не имеет атрибута для установки фонового изображения. Впрочем, все должно быть хорошо, потому что они предоставляют сопоставления CSS для всех своих элементов, верно? ...

Очевидно нет, потому что, когда я добавляю background-image: url('img.png'); (css и изображение находятся в одном каталоге) к 

.ais-Panel-header {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 5rem;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    border-bottom: 1px solid #f1b68a; }

Я получаю следующую ошибку

enter image description here

Панель работает с любым background-color. В любом случае, проблема не зависит от элемента, я пробовал пути к файлам изображений с другими элементами, такими как фон тела, и столкнулся с той же ошибкой. К сожалению, поскольку на этот раз я имею дело с компонентом React, я не могу просто ласкать <body background="path"> in.

Кто-нибудь имеет какой-либо опыт с этим или каким-либо ключом к пониманию того, почему это происходит и возможные обходные пути?

1 Ответ

0 голосов
/ 19 мая 2019

next-css не обрабатывает загрузку изображения 

const withCSS = require("@zeit/next-css");
module.exports = withCSS({
  webpack: config => {
    config.module.rules.push({
      test: /\.(png|jpg)$/,
      use: {
        loader: "url-loader"
      }
    });
    return config;
  }
});
...