Next.js 是一个基于 React 的轻量级框架，它提供了 SSR、静态生成、动态导入和预获取等高级功能，用来开发高性能的、可扩展的 Web 应用程序。 在默认情况下，Next.js 支持样式文件包括 CSS、Sass 和 Styled-jsx，也可以通过配置自定义 CSS 处理器。
Less 是一种动态样式表语言，它增加了许多 CSS 工作流程的功能，如变量、混合、函数等。在本篇文章中，我们将介绍如何在 Next.js 中使用 Less 开发 Web 应用程序。
安装依赖
安装 Less 和 Less-loader, 这里假设你已经安装了 Next.js,如果没有，请先安装。
npm install less less-loader --save-dev
配置 Next.js
默认情况下，Next.js 使用 CSS-in-JS 库 Styled-jsx 处理样式，我们需要自定义 Next.js 应用程序支持 Less 样式文件。首先，在项目根目录下创建一个名为 next.config.js 的文件，然后在文件中添加以下代码：
-- -------------------- ---- -------
----- -------- - ---------------------------
-------------- - ----------
--------------- -------- -
------ -------
--
----------- -----
----------------- -
-------------- --
--------------- ----------------------------
--
------------------ -
------------------ -----
--
---withLess 函数将 Less-loader 导入到 Next.js 应用程序中，并针对 CSS Modules 启用了相应的 Less 配置。 其中，localIdentName 定义了生成的类名模板，‘[local]’ 表示用原来的名称，'[hash:base64:5]' 表示使用 5 个字符的 hash 值来改变名称。
在作为参数传递给 lessLoaderOptions 对象的选项中，javascriptEnabled 设置为 true，这允许 Less 中使用 JavaScript 代码。它默认为 false，因为JavaScript 是默认禁用的。
创建 Less 文件
现在我们已经完成了 Next.js 的配置，接下来我们可以开始编写 Less 样式文件。这里我们创建一个名为 styles.less 的文件，然后编写以下代码：
-- -------------------- ---- -------
--------------- --------
------- -
----------------- ---------------
------ -----
-------- ---- -----
-------------- ----
----------- ---------------- ---- -----
------- -
----------------- ---------------------- -----
-
-
------ -
------ -----
-以上代码中定义了两个变量：@primary-color 和 .button. .button 样式定义了一个浅蓝色背景、白色文本、圆角和悬停动画等按钮样式， .title 样式定义为黑色文本。
现在我们可以在我们的 React 组件中导入 styles.less 中的样式：
-- -------------------- ---- -------
------ ------ ---- ----------------
-------- ----- -
------ -
---- -------------------------
--------- ----------
------- ------------------------------- -----------
------
--
-
------ ------- ----运行应用程序
最后一步是运行我们的应用程序，使用命令：
npm run dev
如果顺利的话，就可以在浏览器中看到一个拥有 Less 样式的 Next.js 应用程序。
结论
在本文中，我们介绍了如何在 Next.js 应用程序中使用 Less ，通过自定义 Next.js 的配置，我们成功地将 Less-loader 引入到 Next.js 应用程序中，并创建了一些 Less 样式文件并使用它们来装饰我们的 React 组件。虽然它需要一些额外的设置，但它提供了更强大和灵活的样式定制能力，这使得我们在编写高质量的 Web 应用程序时更加自由和高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67494b48a1ce0063544d3ddd