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

时间：2019-05-19 01:14:40

标签： css reactjs algolia next.js

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

因此，第三方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; }

我收到以下错误

enter image description here

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

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

1 个答案:

答案 0 :(得分：0)

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;
  }
});
相关问题
最新问题