Next.js添加自定义CSS遇loader错误求助（附配置文件）

看起来你碰到了Next.js里Webpack无法识别模板文件类型的报错，虽然尝试了next-images但没效果——这很正常，因为next-images只负责处理图片资源，管不到模板文件。我来帮你一步步解决这个问题：

问题根源 #

报错提示You may need an appropriate loader to handle this file type，本质是Webpack不知道该怎么解析你引入的模板文件（比如.html、.tpl这类非默认支持的格式），需要给它配置对应的loader规则。

具体解决步骤 #

1. 安装对应模板文件的loader #

首先根据你模板的类型安装合适的loader，比如如果是HTML模板，就安装html-loader：

npm install html-loader --save-dev
# 用yarn的话：
yarn add html-loader -D

如果是EJS/Handlebars这类模板，换成ejs-loader或handlebars-loader即可。

2. 修改next.config.js，添加Webpack规则 #

你现在的next.config.js只配置了CSS支持，需要扩展Webpack的规则来处理模板文件。修改后的配置如下：

const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  publicRuntimeConfig: {
    APP_NAME: '',
    API_DEVELOPMENT: '',
    API_PRODUCTION: '',
    PRODUCTION: false
  },
  webpack: (config) => {
    // 这里以.html模板为例，根据你的实际文件后缀修改test规则
    config.module.rules.push({
      test: /\.html$/,
      use: 'html-loader'
    })
    return config
  }
})

3. 确认组件中模板的引入方式 #

确保你在组件里正确引入模板文件，比如：

import myTemplate from './templates/my-template.html'

额外注意点 #

• 如果你的模板是其他格式，比如.ejs，只需要把test: /\.html$/改成test: /\.ejs$/，并安装对应的ejs-loader就行。
• 重启你的Next.js开发服务器，确保新的配置生效。

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