1. 什么是 Less 预处理器
在介绍如何在 Next.js 中配置 Less 预处理器之前，我们需要先了解 Less 。
Less 是一种 CSS 预处理器，它扩展了 CSS 语言，增加了变量、函数、混合(mixins)等功能，让 CSS 更加强大、易用和可维护。通过使用 Less，我们可以通过嵌套规则、变量和函数来简化样式表的编写。
与 Sass 相比，Less 的语法更加简洁易懂，学习曲线也更加平滑。因此，它在前端开发中被广泛应用。
2. 在 Next.js 中使用 Less
在 Next.js 中，使用 Less 非常方便。我们只需要安装 less 和 @zeit/next-less 两个包，然后配置一下 next.config.js 文件即可。
2.1 安装依赖包
首先，需要安装 less 和 @zeit/next-less 两个包。
使用 npm 安装：
npm install less @zeit/next-less --save
或者使用 yarn 安装：
yarn add less @zeit/next-less
2.2 配置 next.config.js
在 Next.js 项目的根目录下，新建一个 next.config.js 文件。然后，在该文件中添加如下代码：
const withLess = require('@zeit/next-less')
module.exports = withLess({
lessLoaderOptions: {
javascriptEnabled: true
}
})上面的代码中，我们引入了 @zeit/next-less 包，并且调用 withLess 方法，将其配置应用于 Next.js 项目中。lessLoaderOptions 是我们配置 Less 的地方，其中的 javascriptEnabled: true 表示支持将 JavaScript 代码嵌入到 Less 样式表中。
2.3 编写 Less 样式文件
在 Next.js 中，可以在页面组件中编写样式。为了方便说明，我们在一个简单的页面上使用 Less。
新建一个 pages/index.js 文件，然后在该文件中添加如下代码：
-- -------------------- ---- -------
------ ----- ---- -------
------ ------ ---- --------------
------ ------- -------- ------ -
------ -
---- -----------------------------
-- ------------------------------ ------- ---- ---------
------
-
-上面的代码中，我们引入 index.less 文件，并使用 styles.container 和 styles.text 类名来展示样式。
然后，在项目根目录下，新建一个 styles 目录，并在该目录下新建一个 index.less 文件。在该文件中添加如下代码：
-- -------------------- ---- -------
---------- -
-------- -----
---------------- -------
------------ -------
------- ------
----- -
---------- -----
------ -----
-
-上面的代码中，我们定义了一个 .container 类，它包含了一个 .text 子类。这样，我们就可以通过嵌套规则来编写样式。
2.4 运行项目
启动项目：
npm run dev
或者：
yarn dev
在浏览器中访问 http://localhost:3000，即可看到页面上显示了样式。
3. 总结
通过本篇文章，我们了解了 Less 预处理器的概念，以及在 Next.js 中如何配置和使用 Less。
其中，关键的步骤是：
- 安装
less和@zeit/next-less包； - 在
next.config.js文件中添加配置信息； - 在组件中引入 Less 样式，并使用相应的类名。
通过这些步骤，我们就可以在 Next.js 中愉快地使用 Less 预处理器来编写样式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f22a6cf6b2d6eab3be5f9c