Nextjs 13 @import scss文件返回ModuleParseError

Question

我使用Next.js v13和monorepo结构。当我试图在另一个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

如何处理此错误？

Answer 1

所以这是NextJs v13.0.0的一个bug。在升级版本后，这个问题已经得到解决。