Next.js 13.4开发环境Webpack合并CSS，需显示CSS源文件路径

问题原因 #

你手动在webpack配置中添加了style-loader，覆盖了Next.js默认的CSS处理逻辑。Next.js在开发环境默认会生成带source map的单独CSS文件，而style-loader会把所有样式注入到单个style标签，丢失了源文件关联信息。

解决方案 #

1. 修改next.config.js配置 #

移除自定义的Sass和第三方CSS的webpack规则，启用CSS source map：

/** @type {import('next').NextConfig} */
require("dotenv").config();
const path = require("path");

const nextConfig = {
  env: {
    REACT_APP_API_URL: process.env.REACT_APP_API_URL,
    REACT_APP_API_URL1: process.env.REACT_APP_API_URL1,
    REACT_APP_LANGUAGES: process.env.REACT_APP_LANGUAGES,
    REACT_APP_LANGUAGES_GT: process.env.REACT_APP_LANGUAGES_GT,
    REACT_APP_DEFAULT_LANGUAGE: process.env.REACT_APP_DEFAULT_LANGUAGE,
    REACT_APP_DEFAULT_LANGUAGE_FORCED_REDIRECT: process.env.REACT_APP_DEFAULT_LANGUAGE_FORCED_REDIRECT,
    REACT_APP_WEBSITE_NAME: process.env.REACT_APP_WEBSITE_NAME,
  },
  sassOptions: {
    includePaths: [path.join(__dirname, "styles")],
  },
  // 启用CSS source map
  css: {
    sourceMap: true,
  },
  webpack: (config, { dev }) => {
    if (dev) {
      config.devtool = "source-map";
    }
    // 移除原来手动添加的.s[ac]ss和第三方CSS规则
    return config;
  },
};

module.exports = nextConfig;

2. 验证配置 #

• 重启开发服务器（npm run dev）
• 打开浏览器调试工具，查看元素的样式，此时应该能看到对应的.scss源文件路径和行号

补充说明 #

Next.js自带对Sass的内置支持，无需手动配置style-loader、css-loader和sass-loader。对于第三方库的CSS（如@fortawesome、glightbox），Next.js也会自动处理，不需要额外添加规则。

如果需要自定义第三方CSS的处理，可以通过修改webpack规则的方式，但不要覆盖默认的Sass处理逻辑，避免破坏source map生成。

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