Nextjs 13 @import scss file returns ModuleParseError-CodePudding

I use Next.js v13 with monorepo structure. When I try to import a scss file in another scss file, I get this error:

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";

This is the 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;

and This is my project structure:

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

How can I handle this error?

CodePudding user response：

So this was a bug with NextJs v13.0.0. This issue has been solved after upgrading the version.