【发布时间】：2022-12-31 22:25:37
【问题描述】：
我正在将 Next.js 应用程序从 .js 换成 .ts，并使用 ScSS，这似乎是我在 npm run dev 上遇到的第一个错误。似乎当我运行npm run build时，我遇到了一些与 scss 无关的问题，所以可能是一个更广泛的问题。
真的很感激任何建议吗？
从 js 切换到 ts
touch tsconfig.json
npm run dev
npm install --save-dev typescript @types/react @types/node\n
npm run dev
[错误]：NPM 运行开发我在 npm run dev 上收到以下错误：
Watchpack Error (initial scan): Error: ENOTDIR: not a directory, scandir '/Users/Edward.Martin/Desktop/Edward/projects/coinGift/node_modules/next/dist/compiled/util/util.js'
error - ./src/pages/_app.js:2:0
Module not found: Can't resolve 'styles/global.scss'
1 | import React from "react";
> 2 | import "styles/global.scss";
3 | import "styles/components/index.scss";
4 | import NavbarCustom from "components/NavbarCustom";
5 | import Footer from "components/Footer";
[错误]：NPM 运行构建
Failed to compile.
./src/pages/_app.js
Module not found: Can't resolve 'styles/global.scss' in '/Users/Edward.Martin/Desktop/Edward/projects/coinGift/src/pages'
./src/pages/_app.js
Module not found: Can't resolve 'styles/components/index.scss' in '/Users/Edward.Martin/Desktop/Edward/projects/coinGift/src/pages'
./src/pages/_app.js
Module not found: Can't resolve 'components/NavbarCustom' in '/Users/Edward.Martin/Desktop/Edward/projects/coinGift/src/pages'
./src/pages/_app.js
Module not found: Can't resolve 'components/Footer' in '/Users/Edward.Martin/Desktop/Edward/projects/coinGift/src/pages'
./src/pages/_app.js
Module not found: Can't resolve 'util/analytics' in '/Users/Edward.Martin/Desktop/Edward/projects/coinGift/src/pages'
> Build failed because of webpack errors
失败的解决方案
添加 scss 声明大多数文章都说将模块定义添加到next-env.d.ts，但这只是被覆盖了（很明显这不再是解决方案，因为该文件// NOTE: This file should not be edited 中有注释）
我在根目录下添加了一个index.d.ts，内容如下：
declare module "*.module.css";
declare module "*.module.scss";
declare module "*.scss" {
const content: { [key: string]: any };
export = content;
}
以及将"index.d.ts"添加到tsconfig.json的include部分
安装其他依赖
npm i style-loader, css-loader, typescript
【问题讨论】：
标签： typescript webpack sass next.js