这篇文章上次修改于 992 天前,可能其部分内容已经发生变化,如有疑问可询问作者。

本文近期更新较为频繁,建议不要直接对全文进行转载,适当保留原文链接,可以让读者更好的看到最新版本...

21.07.01 更新:又又又回到了 NextJS,这次官方来了个大升级,直接上了 11 版本... 社区里也有大佬出了最新的包解决配置问题

11.0.1 版

使用 yarn 安装 next-with-less 包,并顺带最新版本的 lessless-loader

yarn add next-with-less less less-loader

并修改 next.config.js 配置文件:

// next.config.js
const withLess = require("next-with-less");

module.exports = withLess({
  lessLoaderOptions: {
    lessOptions: {
      modifyVars: {
        "@primary-color": "#f74a49",
        "@border-radius-base": ".5em"
      }
    }
  }
});

使用此包,TypeScript 可能会存在报错问题,但根据作者的说明,如果 PR 成功合并,可能 NextJS 本身就兼容 Less 了。

解决办法就是增加一个全局定义,参考 NextJS 自带的 /types/global.d.ts 文件写一个 Less 的定义就行。

// global.d.ts
declare module '*.module.css' {
  const classes: { readonly [key: string]: string }
  export default classes
}

declare module '*.module.sass' {
  const classes: { readonly [key: string]: string }
  export default classes
}

declare module '*.module.scss' {
  const classes: { readonly [key: string]: string }
  export default classes
}

在自己项目的 types 文件夹里面新建一个同名文件,输入如下代码:

declare module '*.module.less' {
  const classes: { readonly [key: string]: string }
  export default classes
}

就可以正常引入,支持以 CSS Module 的方式使用,不会报错了。

import styles from "./styles/List.module.less";

10.2.0 版

21.05.27 更新:最新教程使用的是 NextJS 10.2.0 版,如果你使用的版本低于此版本,可能会无法使用。毕竟 less-loader 最新版本使用的是 WebPack 5,已经有很多依赖为此进行了更新,试错非常需要时间和精力...

使用 yarn 安装 next-plugin-antd-lessbabel-plugin-import

yarn add next-plugin-antd-less babel-plugin-import

这里是 package.json 的依赖情况,版本不一致很有可能导致配置无效或出现报错情况。

"babel-plugin-import": "^1.13.3",
"next": "^10.0.0",
"next-plugin-antd-less": "^1.2.1",

创建 .babelrc.js 文件,填写下方内容:

module.exports = {
  presets: [['next/babel']],
  plugins: [['import', { libraryName: 'antd', style: true }]],
};

创建 next.config.js 文件,填写下方内容:

const withAntdLess = require('next-plugin-antd-less');

module.exports = withAntdLess({
  // optional
  modifyVars: { '@primary-color': '#f74a49' },
  // optional
  lessVarsFilePathAppendToEndOfContent: false,
  // optional https://github.com/webpack-contrib/css-loader#object
  cssLoaderOptions: {},

  // Other Config Here...

  webpack(config) {
    return config;
  },

  future: {
    // if you use webpack5
    webpack5: true,
  },
});

启动项目,理论上 Less 可以成功使用了,注意只能用 require 引入,而不是 import

require('antd/dist/antd.less');

根据实际需求,替换 modifyVars 里面的参数,具体变量可以参考 Antd 文档 - 定制主题

next-plugin-antd-less 说明

测试了一下,不添加 babel-plugin-import 也可用,不过不能有 .babelrc.js 文件就是了

9.5.5 版(参考)

以下教程适用于 NextJS 9.5.5 版,新版本可能不可用

近期在细化魔改公司的某个 NextJS 项目,需要优化样式,于是想到了使用 Less 编译 Antd。一番折腾后,可以正常使用和编译了。以下内容仅供参考,以实际项目使用为准。

_app.tsx

从原有的 CSS 引入改成仅引入组件样式

// import 'antd/dist/antd.css';
import 'antd/lib/style/components.less';

修改 Next 配置文件

next.config.js

const withCSS = require('@zeit/next-css');
const withLess = require('@zeit/next-less')
const webpack = require('webpack');
const withBundleAnalyzer = require("@zeit/next-bundle-analyzer");

module.exports = withBundleAnalyzer(withLess(withCSS({
    webpack: (config) => {
        ...
    },
    lessLoaderOptions: {
        modifyVars: {
            'primary-color': '#fa3532',
            'link-color': '#fa3532',
        },
        javascriptEnabled: true
    }
})));

其中,modifyVars 是 Antd 的变量,可以修改颜色,间距等。javascriptEnabled 必须开启,才可以正常编译 Antd,否则会出现报错。