Next.js中CSS加载背景图片遇Module parse error问题求助

问题原因 #

你遇到的这个错误，核心原因是@zeit/next-css（现在已迁移为next-css）默认只负责处理CSS文件的解析，并没有配置Webpack来处理图片这类静态资源。当你在CSS里引用本地图片时，Webpack不知道该如何解析这些非CSS文件，就会抛出Module parse error。而background-color能正常工作，是因为它不需要处理额外的资源文件。

可行解决办法 #

方法1：利用Next.js的Public目录（最简单推荐）

Next.js内置了对public目录的静态资源支持，所有放在这个目录下的文件都可以直接通过根路径访问。

• 把你的img.png移动到项目根目录的public文件夹里（如果没有就新建一个）
• 在CSS里修改路径为：

  .ais-Panel-header {
    background-image: url('/img.png');
  }
  

  这样Next.js会自动处理这个静态资源的路径，不会再报错。

方法2：扩展Webpack配置处理图片资源

如果不想把图片放到public目录，可以修改next.config.js，配置Webpack用file-loader或url-loader来处理图片文件：

1. 先安装依赖：

   npm install file-loader --save-dev
   # 或者用yarn
   yarn add file-loader -D
   

2. 修改next.config.js（如果没有就新建）：

   const withCSS = require('@zeit/next-css');
   
   module.exports = withCSS({
     webpack(config) {
       // 添加处理图片的规则
       config.module.rules.push({
         test: /\.(png|jpg|jpeg|gif|svg)$/,
         use: [
           {
             loader: 'file-loader',
             options: {
               publicPath: '/_next/static/images/',
               outputPath: 'static/images/',
               name: '[name].[hash].[ext]',
             },
           },
         ],
       });
       return config;
     },
   });
   

3. 之后你就可以在CSS里正常引用同目录的图片了：

   .ais-Panel-header {
     background-image: url('./img.png');
   }
   

方法3：React内联样式（针对组件场景）

因为是React组件，你也可以绕过CSS文件，直接用内联样式来设置背景图，这种方式Webpack会自动解析require的图片：

import React from 'react';
import img from './img.png'; // 或者用require('./img.png')

const YourComponent = () => {
  return (
    <div className="ais-Panel-header" style={{ backgroundImage: `url(${img})` }}>
      {/* 组件内容 */}
    </div>
  );
};

export default YourComponent;

额外提示 #

如果你用的是Next.js 12+版本，其实官方已经推荐用内置的CSS支持，不需要再安装@zeit/next-css了。你可以尝试移除这个依赖，直接使用框架原生的CSS导入能力，这样可能会减少额外的配置问题。另外要注意图片路径的拼写，大小写在Linux/macOS环境下是敏感的，别写错了。

内容的提问来源于stack exchange，提问作者notacorn