在开发前端项目过程中，我们常常需要使用 Less 样式预处理器来编写样式。使用 Less 可以让我们在 CSS 基础上有更多的选择和控制权，同时也可以让我们的代码更加简洁易读。而 nuxt-less-resources-loader 是一个可以帮助我们在 Nuxt.js 项目中使用 Less 的 npm 包，可以让我们更加高效地使用 Less。
安装 nuxt-less-resources-loader
首先，我们需要在 Nuxt.js 项目中安装 nuxt-less-resources-loader 包。可以通过 npm 安装：
npm install nuxt-less-resources-loader --save-dev
或者使用 yarn：
yarn add nuxt-less-resources-loader --dev
使用 nuxt-less-resources-loader
安装成功后，我们就可以在 Nuxt.js 项目中使用 nuxt-less-resources-loader 了。下面是使用步骤：
第一步，添加配置
打开 nuxt.config.js 文件，我们需要添加 styleResources 的配置项，用于指定需要全局注入的 Less 文件：
-- -------------------- ---- -------
------ ------- -
-- --------
------ -
--
- -------- ---- ----- -------------- -
--
--------------- -
----- -
------------------------------
---------------------------------
--
--
--
-在这个例子中，我们将 assets/styles/mixins.less 和 assets/styles/variables.less 文件添加到了 styleResources 中。这两个文件将会被自动注入到所有的 Less 文件中，因此我们可以在所有的 Less 文件中使用其中定义的变量和混合（mixin）。
第二步，使用 Loader
我们还需要在 build.loaders 中添加 Loader 配置，用于将 Less 文件转换为 CSS 文件。可以这样配置：
-- -------------------- ---- -------
------ ------- -
-- --------
------ -
-- -- ------ --
-------- -
----- -
------------ -
----------- -
---------------- ---------
--
--
--
--
--
-在这个例子中，我们使用了 less-loader 将 Less 文件转换成 CSS 文件，同时也使用了 lessOptions 配置项来传递一些自定义的参数。在这个例子中，我们使用了 modifyVars 配置项来修改 Less 样式文件中的变量值，这里将 primary-color 变量的值改为了 #1890FF。
示例代码
下面是一个完整的 nuxt.config.js 文件的示例代码：
-- -------------------- ---- -------
------ ------- -
--
- --------
--
------ -
--
- -------- ---- ----- -------------- -
--
--------------- -
----- -
------------------------------
---------------------------------
--
--
--
- -- --------------- ---- ----- --- --
--
-------- -
----- -
------------ -
----------- -
---------------- ---------
--
--
--
--
--
-总结
nuxt-less-resources-loader 让我们在 Nuxt.js 项目中更加高效地使用 Less 样式预处理器。通过配置 styleResources 和添加 Loader 配置，我们可以将需要全局注入的 Less 文件自动注入到所有的 Less 文件中，并且可以自定义一些参数和配置项，以便更好地满足项目的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f78238a385564ab693a