After setting up a new NextJS project, I decided to incorporate SCSS support. The guidelines provided in the documentation seemed straightforward. Following the installation instructions and including an import of SCSS as shown below:
import "@/styles/styles.scss";
import type { AppProps } from "next/app";
export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}
Subsequently running npm run dev, my page kept loading endlessly in the browser. Upon stopping the script execution and deleting the line
import "@/styles/styles.scss";error - unhandledRejection: Error: Cannot find module '/...../node_modules/next/dist/compiled/sass-loader/fibers.js'
at webpackEmptyContext (/...../node_modules/next/dist/compiled/sass-loader/cjs.js:1:11235)
at getSassOptions (/.....//node_modules/next/dist/compiled/sass-loader/cjs.js:1:5586)
at Object.loader (/.....//node_modules/next/dist/compiled/sass-loader/cjs.js:1:2683)
at LOADER_EXECUTION ......
{
code: 'MODULE_NOT_FOUND
}