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

Question

可能需要注意的是，我正在使用 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。无论如何，问题不在于 element-specific，我已经尝试将图像文件路径与其他元素（如正文背景）和运行放入相同的错误中。不幸的是，由于这次我正在处理一个 React 组件，我不能随便装一个 <body background="path"> in.

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

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

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

Module parse error when trying to load background image in a css element

css

reactjs

algolia

next.js