NextJs 构建失败，而开发服务器运行良好答案

【问题标题】：NextJs build fails, while development server runs fineNextJs 构建失败，而开发服务器运行良好
【发布时间】：2021-03-28 00:41:44
【问题描述】：

我有一个带有自定义较少配置的 NextJs 应用程序：

const withSass = require("@zeit/next-sass");
const withLess = require("@zeit/next-less");
const withCSS = require("@zeit/next-css");

const isProd = process.env.NODE_ENV === "production";
const basePath = process.env.BASE_PATH || '';

// fix: prevents error when .less files are required by node
if (typeof require !== "undefined") {
  require.extensions[".less"] = (file) => {};
}

module.exports = withCSS({
  // basePath: basePath,
  cssModules: true,
  cssLoaderOptions: {
    importLoaders: 1,
    localIdentName: "[local]___[hash:base64:5]",
  },
  ...withLess(
    withSass({
      lessLoaderOptions: {
        javascriptEnabled: true,
      },
    })
  ),
});

使用npm run dev 运行开发构建工作正常，而运行npm run build 会导致以下错误：

./src/pages\index.tsx:2:20
Type error: Cannot find module '../../styles/Home.module.less' or its corresponding type declarations.

  1 | import Head from 'next/head'
> 2 | import styles from '../../styles/Home.module.less'
    |                    ^
  3 | import PageLayout from './layout'
  4 | 
  5 | export default function Home(props) {
info  - Creating an optimized production build .

这是什么原因？

【问题讨论】：

尝试删除.less扩展
现在即使在开发中也失败了。
我敢打赌这个答案会对你有所帮助stackoverflow.com/questions/40382842/…
您只需要为.less 模块声明类型

标签： reactjs typescript less next.js

【解决方案1】：

正如 cmets 所建议的，缺少 Typescript 编译器的声明：

///declaration.d.ts
declare module '*.less' {
    const resource: { [key: string]: string };
    export = resource;
}

以及 tsconfig.json 中的相应参考：

"include": [
    "node_modules/@types",
    "next-env.d.ts",
    "declaration.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],

【讨论】：