无法使用 typescript 和 sass 构建 next.js 应用程序答案

【问题标题】：Can't build next.js app with typescript and sass无法使用 typescript 和 sass 构建 next.js 应用程序
【发布时间】：2021-02-09 16:32:14
【问题描述】：

嗯，我已经制作了我的第一个 Next.js 应用程序，但我遇到了部署问题。我不确定究竟是什么导致了这个问题，我不得不更新服务器上的节点版本，也许这搞砸了，但这是我的问题。我可以在 Windows 计算机上正常运行“npm run build”，但在 ubuntu 服务器上失败。它抛出以下错误：

Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://err.sh/next.js/css-global
Location: pages/_app.tsx

所以，据我了解，它抱怨我没有在 _app.js 中导入 css，因为它不明白 _app.tsx 是一回事，就像构建脚本不理解打字稿一样？或者可能是 sass 加载程序的某种问题？

这是我的 _app.tsx：

import { GlobalStoreProvider } from '../mptools/Store/GlobalStoreProvider'
import en from '../util/locale/en'
import hr from '../util/locale/hr'
import { LocaleProvider } from '../util/locale/NikolicaLocaleContext'
import './style.scss'

function MyApp({ Component, pageProps }) {
    return (
        <LocaleProvider languages={{ hr, en }} initialLanguage="en">
            <GlobalStoreProvider>
                <Component {...pageProps} />
            </GlobalStoreProvider>
        </LocaleProvider>
    )
}

export default MyApp

这是我的 package.json：

{
    "name": "nikolica-apartments",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start -p 8881"
    },
    "dependencies": {
        "@types/nodemailer": "^6.4.0",
        "lodash": "^4.17.20",
        "next": "9.5.5",
        "node-sass": "^4.14.1",
        "nodemailer": "^6.4.14",
        "react": "16.13.1",
        "react-dom": "16.13.1"
    },
    "devDependencies": {
        "@types/node": "^14.11.8",
        "@types/react": "^16.9.52",
        "babel-plugin-import": "^1.13.1",
        "babel-plugin-inline-react-svg": "^1.1.1",
        "babel-plugin-lodash": "^3.3.4",
        "typescript": "^4.0.3"
    }
}

运行 node -v node-sass -v 和 tsc -v 命令显示所有三个都已安装（分别为 12.19.0、4.14.1 和 4.0.5）。我不确定如何调试它。我已经删除了我的 node_modules 和 package-lock.json 并再次执行了“npm i”，但同样的问题仍然存在。

编辑：另外，这里是 tsconfig.json：

{                                               
  "compilerOptions": {                          
    "target": "es5",                            
    "lib": [                                    
      "dom",                                    
      "dom.iterable",                           
      "esnext"                                  
    ],                                          
    "allowJs": true,                            
    "skipLibCheck": true,                       
    "strict": false,                            
    "forceConsistentCasingInFileNames": true,   
    "noEmit": true,                             
    "esModuleInterop": true,                    
    "module": "esnext",                         
    "moduleResolution": "node",                 
    "resolveJsonModule": true,                  
    "isolatedModules": true,                    
    "jsx": "preserve"                           
  },                                            
  "include": [                                  
    "next-env.d.ts",                            
    "**/*.ts",                                  
    "**/*.tsx", "mptools/Helpers/range.ts"      
  ],                                            
  "exclude": [                                  
    "node_modules"                              
  ]                                             
}

【问题讨论】：

您是否将declare module "*.module.scss" { const classes: { [key: string]: string }; export default classes; } 添加到 next-env.d.ts 文件中？

标签： node.js typescript sass next.js

【解决方案1】：

嗯，我修好了。删除 node_modules 和 package.json 并再次执行 npm i 并没有帮助，但删除整个文件夹并再次从 git 中提取解决了问题。不知道是什么问题，但是……嗯。

【讨论】：

【解决方案2】：

在使用以下行更新我的next-env.d.ts 后，我能够构建我的项目：

/// <reference types="next" />
/// <reference types="next/types/global" />

线条必须与上面显示的完全相同。

我遵循了这个项目示例： https://github.com/jpedroschmitz/typescript-nextjs-starter

【讨论】：