迁移至TypeScript时出现无法解析@/styles/globals.css错误

问题背景 #

将NextJS项目中的.js文件改为.tsx后，默认配置下出现TypeScript模块找不到错误，报错信息如下：

error - ./pages/_app.tsx:1:0
Module not found: Can't resolve '@/styles/globals.css'

import '@/styles/globals.css'
import { Analytics } from '@vercel/analytics/react'
export default function App({ Component, pageProps }) {

已尝试NextJS 13多个版本（含最新版）、TypeScript 4/5版本，VSCode中command+click无法定位@/styles/globals.css文件；将文件改为Globals.module.css后可定位，但仍报错模块未找到。

解决思路 #

• 检查路径别名配置：确认tsconfig.json或jsconfig.json中是否配置了@指向项目根目录的路径，示例配置：

  {
    "compilerOptions": {
      "baseUrl": ".",
      "paths": {
        "@/*": ["*"]
      }
    }
  }
  

  若使用NextJS 13 App Router模式，需额外在next.config.js中配置webpack别名：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    webpack: (config) => {
      config.resolve.alias['@'] = __dirname;
      return config;
    },
  };
  module.exports = nextConfig;
  

• 验证文件实际路径：确认styles/globals.css确实存在于项目根目录下，检查路径大小写是否与导入语句一致（部分系统区分大小写）。
• 清除缓存重启服务：执行rm -rf .next node_modules，再重新执行npm install和npm run dev，避免缓存导致的路径解析异常。
• 检查TypeScript配置兼容性：确保tsconfig.json中的moduleResolution设置为node或bundler（NextJS 13推荐），避免解析逻辑冲突。
• 遵循样式导入规则：NextJS中全局样式仅能在_app.tsx（Pages Router）或app/layout.tsx（App Router）中导入；若改用CSS Modules，导入方式应为import styles from '@/styles/Globals.module.css'，并通过styles.className调用样式。

内容的提问来源于stack exchange，提问作者Seto