如何在 next-js 中正确导入 scss 文件？

Question

I have a nextJS project in which I am using sass with typescript. It all works in development environment but when I try to make a build version of my project it gives me this error.

This is my next.config.js

const config = {
  sassOptions: {
  cssModules: false,
},
  images: {
  domains: ["image.tmdb.org"],
 },
};

Answer 1

After some trial and error, I found the way to work around this error.

Step 1

Create a file named declaration.d.ts on the root of project.

Step 2

declare module "*.scss" {
  const content: Record<string, string>;
  export default content;
}

By default typescript does not knows any files other than.ts or.tsx so any other files which is imported in typescript file need to be first declared like this.