为什么在带有 Webpack5 的 nextjs 应用中没有应用 Ant design less 样式？答案

【问题标题】：Why is Ant design less styles not applied in nextjs app with Webpack5?为什么在带有 Webpack5 的 nextjs 应用中没有应用 Ant design less 样式？
【发布时间】：2021-07-20 05:50:01
【问题描述】：

我正在使用 webpack5 构建一个示例 Nextjs 应用程序，对于 UI，我使用的是 Antd 框架。我根本没有看到应用的样式。当我进入开发工具时，我确实看到了应用于按钮的 ant 类，但它们没有样式。这是我的文件：

globals.less:

@import 'antd/dist/antd.less';

_app.js：

import "../styles/globals.less";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

next.config.js：（用于提供加载器和使用 webpack5）

module.exports = {
  future: {
    webpack5: true,
  },
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.less$/,
      use: [
        {
          loader: "css-loader", // translates CSS into CommonJS
        },
        {
          loader: "less-loader", // compiles Less to CSS
          options: {
            lessOptions: {
              // If you are using less-loader@5 please spread the lessOptions to options directly
              modifyVars: {
                "primary-color": "#1DA57A",
                "link-color": "#1DA57A",
                "border-radius-base": "2px",
              },
              javascriptEnabled: true,
              sourceMap: true,
            },
          },
        },
      ],
    });

    return config;
  },
};

index.js：

import { Button } from 'antd'
import Head from 'next/head'

export default function Home() {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main >
        <h1 >
          Welcome to Nextjs
        </h1>
        <div>
          <Button type="primary">Primary Test</Button>
        </div>
      </main>
    </div>
  );
}

package.json:

{
  "name": "hello",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@zeit/next-less": "^1.0.1",
    "antd": "^4.15.2",
    "babel-plugin-import": "^1.13.3",
    "css-loader": "^5.2.4",
    "less": "^4.1.1",
    "less-loader": "^8.1.1",
    "next": "10.1.3",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {}
}

当我通过开发工具查看页面时，我什至看不到脚本标签。

编辑：对于任何说在较少文件的路径中使用 ~ 的人，请注意，从 8.0.0 版开始，它已被弃用。这是更改日志的链接： https://github.com/webpack-contrib/less-loader/blob/master/CHANGELOG.md

【问题讨论】：

只要查看官方示例，看看你的配置是否有问题 Next.js github 页面有很多示例，github.com/vercel/next.js/tree/canary/examples/…。我怀疑您的问题是由于较少的文件路径错误。您可能可以检查 devTools 以查看 less 文件是否被正确加载
当我使用你提到的例子时，我得到这个错误：错误：找不到模块'webpack/lib/node/NodeTemplatePlugin'
澄清一下，这个问题是 webpack 5 特有的吗？如果您在配置中禁用webpack5 标志，它是否有效？
似乎是这样，我之所以这么说，是因为我让它与 Webpack4 一起使用，但使用 wp4 我不得不将 Less-Loader 降级到 7.3.0，否则我得到的 getOptions 不是一个函数错误。 getOptions 错误是由于 next.config.js 文件中的 lessOptions 对象造成的。
你能做到吗？

标签： reactjs next.js antd webpack-5

【解决方案1】：

在less-loader v8.0.0 之前，您需要将~ 添加到您的antd.less 导入中，以告诉webpack 加载器解析来自node_modules 目录的导入。

@import '~antd/dist/antd.less';

【讨论】：

这是不正确的。如果您阅读 less-loader 的更改日志，则从 8.0.0 开始就不再需要 ~。这是更新日志：“使用 ~ 已被弃用，可以从您的代码中删除（我们推荐它），但出于历史原因，我们仍然支持它。”和链接：github.com/webpack-contrib/less-loader/blob/master/CHANGELOG.md
很公平。它可能不是您特定情况的解决方案，但对于不使用 v8.0.0 的任何人仍然有用，所以我将把答案留在那里。