尝试在 CSS 元素中加载背景图像时出现模块解析错误答案

【问题标题】：Module parse error when trying to load background image in a css element尝试在 CSS 元素中加载背景图像时出现模块解析错误
【发布时间】：2019-05-19 01:14:39
【问题描述】：

可能需要注意的是，我正在使用 Next.js，它已经对 css 文件很挑剔（必须 npm install @zeit/next-css 才能将 css 文件导入到 javascript 页面中）。

所以有一个来自第三方 API 的特定 Panel element 没有用于设置背景图像的属性。不过应该没问题，因为它们为所有元素提供了 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; }

我收到以下错误

该面板适用于任何background-color。无论如何，问题不是特定于元素的，我已经尝试使用其他元素（如主体背景）的图像文件路径并遇到相同的错误。不幸的是，由于这次我正在处理一个 React 组件，所以我不能只是将<body background="path"> 放入其中。

是否有人对此有任何经验或任何线索了解为什么会发生这种情况以及可能的解决方法？

【问题讨论】：

如果可以的话，把图片放到静态文件夹中我会发布一个答案
@evgenifotia 他们都在静态文件夹中。 ://

标签： css reactjs algolia next.js

【解决方案1】：

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;
  }
});

【讨论】：