关于Next.js13接入less的问题的处理方案和思考

背景

写这一篇文章是因为前两天有一个掘友私信问了我一个问题：next.js 13 怎么支持 less 呢？

问题最后解决了，但也没有完全解决。想把这个经验记录下来，然后分享给大家一下，希望遇到这个问题的小伙伴看到这篇文章可以解决当下的问题。

解决过程

收到这个问题后，因为是上班时间原因，我没有直接去尝试，然后发了一个社区的 解决方法，对方尝试后说并没有解决，我设想的是他自己也去社区已经找了，没发现解决方法才问我的，所以我把我的解决思路跟他说了一下：

思路一：参考之前的 next-with-less 源码，然后结合 next.js 接入 sass 的源码，自己去修改 next.js 配置文件中的提供的 webpack 回调函数中返回的 config 配置

思路二：next.js 提供了 loader 注入的方法，可以尝试一下（我是去看到了，所以推荐了一下）

第一个思路可能比较不好处理，需要去看源码，但那部分源码涉及到的逻辑比较多，掘友应该去试了第二个思路，但 next.js 提供的 loader 注入方式其实还是试验性的功能，最近才出现不久，我也是下班后晚上去尝试的时候才发现这个 loader 注入方式太简陋了，没办法处理这个问题。

果然，后来对方反馈说还是没有解决问题，本来这时候我有打算按照自己的思路去修改 webpack config 的 loader 源码，不过嫌麻烦，还是打开了 next.js 官网的 issue ，然后搜索了一下 css less 关键字，在 issue 里没有找到直接的解决方案，但是下面有链接到论坛的，点过去发现了 解决方案

具体解决代码：

/** @type {import('next').NextConfig} */
const withLess = require("next-with-less");
const path = require('node:path');

const nextConfig = {
  webpack(config, options) {
    config.module.rules.forEach((rule) => {
      const { oneOf } = rule;
      if (oneOf) {
        oneOf.forEach((one) => {
          if (!`${one.issuer?.and}`.includes('_app')) return;
          one.issuer.and = [path.resolve(__dirname)];
        });
      }
    })
    return config;
  }
}

module.exports = withLess(nextConfig);

但是这个解决方案只能解决 page 目录或者 src 目录的模式，并不能解决 Next.js app 目录模式，新的模式还处于试验性阶段，现在还有不少问题，很多功能也随时会有一些变化，预计要到 next.js 14 才稳定，因此社区的一些成熟插件一般也不会兼容这个模式，按照 Next.js 的最近几个大版本的节奏，一般一个大版本可能在一年左右。

next-with-less 本身也是对 webpack config 进行一个修改，和思路一是符合的。

想进行验证的话可以去拉取 demo工程的test-less分支 进行测试。

对 less 的思考

Next.js 后续可能不会再支持 less 了，在 Next.js 新的app模式中的 css 处理模块中已经没有 less 的影子了，其实在 Next.js 前几个大版本中，最开始是有支持 less 的相关代码的，但现在没有了。

根据 less 最近的版本（2022年6月）和这两年的发版节奏（2022年12月后没发几个版本）感觉有可能会停止维护，当然我没有找到依据，只是我个人的推断，而且 antd-design 新版本已经移除了 less ，因此建议大家新工程逐渐转 sass 。

当然 less 本身也足够稳定，对改动不频繁的老工程而言，就算停止维护，暂时来说也不会有什么影响的。

总结

本篇文章只是记录一个问题的解决过程和额外的思考，但对于以后大家选择 css 预处理器的时候还是会产生一些影响，因此希望可以帮助到大家。

欢迎👏大家关注➕点赞👍➕收藏✨支持一下，有问题欢迎评论区提出，感谢纠错！