Next.js 13单仓库中导入SCSS文件出现ModuleParseError的解决办法

问题详情 #

在Monorepo结构的Next.js v13项目中，尝试在SCSS文件里导入另一个SCSS文件时触发如下错误：

ModuleParseError: Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> @import "~@shared/styles/variables.module.scss";

当前next.config.js配置：

/** @type {import('next').NextConfig} */
const { dependencies } = require("./package.json");

const transpilePackages = Object.keys(dependencies || []).filter((dependency) =>
  dependency.startsWith("@my-root-project/")
);

const nextConfig = {
  experimental: {
    appDir: true,
    transpilePackages,
  },
};

module.exports = nextConfig;

项目目录结构：

my-monorepo-folder: 
  - packages: 
    - apps:
      - nextjs-website // (v13)
    - package-1  
    - package-2
    - shared
      - styles
        - variables.module.scss

解决步骤 #

• 修正SCSS导入语法：Next.js v13不再支持用~解析路径别名，直接移除~符号。如果@shared是已配置的包别名，导入语句改为：

  @import "@shared/styles/variables.module.scss";
  

  若未配置别名，使用相对路径（需根据当前SCSS文件位置调整层级）：

  @import "../../../shared/styles/variables.module.scss";
  

• 安装SCSS处理依赖：Next.js依赖sass包编译SCSS，确保已安装：

  npm install sass --save-dev
  # 或使用yarn
  yarn add sass --dev
  

• 调整transpilePackages配置：确保shared包被正确纳入转译范围。如果shared包的package.json中名称是@my-root-project/shared，当前过滤逻辑有效；若包名是@shared，修改过滤条件：

  const transpilePackages = Object.keys(dependencies || []).filter((dependency) =>
    dependency.startsWith("@shared")
  );
  

  更稳妥的方式是直接显式指定包名，避免依赖解析偏差：

  const nextConfig = {
    experimental: {
      appDir: true,
      transpilePackages: ["@my-root-project/shared"], // 替换为实际包名
    },
  };
  

• 配置路径别名（可选）：若希望用简洁别名导入，在nextjs-website的tsconfig.json或jsconfig.json中添加路径映射：

  {
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@shared/*": ["../../shared/*"]
      }
    }
  }
  

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