在 Vue 的项目开发中，我们通常使用 CSS 来定义样式。但是，使用 CSS 开发时需要考虑到一些问题，比如变量的复用、层级的嵌套、代码可读性等等。而 LESS 就是一种优秀的 CSS 预处理器，它不仅可以解决上述问题，还可以提高开发效率和代码品质。
本文将介绍如何在 Vue-cli 中使用 LESS，并附有详细的代码示例和指导意义。
1. 安装 LESS
首先，我们需要安装 LESS。在 Vue-cli 中，可以使用以下命令进行安装：
npm install less less-loader --save-dev
其中，less 是 LESS 的模块，less-loader 是 LESS 的 Webpack 加载器。
2. 添加 LESS 配置
在 Vue-cli 3.x 中，我们只需要在 vue.config.js 文件中添加 LESS 配置即可。如果当前项目没有该文件，则需要手动创建一个。
在 vue.config.js 文件中，添加以下代码：
-- -------------------- ---- -------
-------------- - -
---- -
-------------- -
----- -
------------------ -----
--
--
--
--其中，css.loaderOptions.less.javascriptEnabled 设置为 true，是为了避免 LESS 报错。
3. 创建 LESS 文件
在项目中创建一个 style.less 文件，并编写以下代码：
-- -------------------- ---- -------
-- ----
--------------- --------
-------------- --------
-- ----
---------- -
------ -----
------- ------
-------- -----
---------------- -------
------------ -------
-
------ -
---------- -----
------------ -----
------ ---------------
-------------- -----
-
-------- -
---------- -----
------------ -------
------ -----
------------ ----
----------- -----
------- --- ----- --------------
--------- -
-------- ---
-------- -------------
------ ----
------- ----
------------- ----
----------------- --------
-------------- ----
-
- ---- -
-------- -------------
------- - ----
------ ---------------
------------ -----
-
------ -
-------- -----
-
- -------- -
----------- -----
-
-4. 引入 LESS 文件
在 Vue 的组件中，引入 LESS 文件，并使用其中定义的样式。
-- -------------------- ---- -------
----------
---- ------------------
---- ------------------- ----------
---- ----------------
-------------------- --- ----------------- ----
---- ------------------ -- - ---- --- ------- --- ---- -- --- --------------
------
---- ----------------
-------------------- --- ----------------- ----
---- ------------------ -- - ---- --- ------- --- ---- -- --- --------------
------
------
-----------
------ ----------- -------
------- ---------------
--------在 style 标签中使用 lang="less"，即可识别 LESS 语法。而 scoped 属性可以使样式只作用于当前组件。
5. 运行项目
现在，我们可以运行项目，查看效果了。
npm run serve
页面将显示以下内容：
指导意义
通过本文的介绍，我们可以得到以下指导意义：
- 在 Vue-cli 项目中使用 LESS，可以通过安装
less和less-loader并在vue.config.js添加 LESS 配置来实现。 - 在 LESS 文件中，我们可以使用变量、嵌套、层级、引用等语法，来提高代码的可读性和维护性。
- 在组件中引入 LESS 文件时，我们需要使用
lang="less"和scoped属性，以便正确识别 LESS 语法和只作用于当前组件。
在实际开发中，使用 LESS 可以提高开发效率和代码品质，同时也可以帮助我们更好地组织样式代码，减少冗余和重复代码。因此，掌握 LESS 的使用方法是非常有必要的。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6794a732504e4ea9bd941897