vue加载同的less

vue中怎么引入less
发布时间：2022-04-21 16:36:18 作者：iii
来源：亿速云 阅读：470
Vue开发者专用服务器,限时0元免费领!查看 >>
本篇内容主要讲解“vue中怎么引入less”，感兴趣的朋友不妨来看看。本文介绍的方法 *** 作简单快捷，实用性强。下面就让小编来带大家学习“vue中怎么引入less”吧!
具体步骤如下：
1首先，在vue-cli中创建一个vuejs项目；
vue create project-name
2vuejs项目创建好后，在项目中使用cnpm命令安装less依赖包；
cnpm install less less-loader --save-dev
3less依赖包安装好后，在webpackconfigjs配置文件中进行以下配置；
{test: /\less$/,loader: "style-loader!css-loader!less-loader",},
4最后，webpackconfigjs文件配置好后，在项目中使用@import方法即可引入less；
<style>
@import "/style/headerless";
</style>
到此，相信大家对“vue中怎么引入less”有了更深的了

前提需要使用create-react-app脚手架搭建，初始化搭建可参考另一篇文章： >进入nodejs官方网站下载软件(nodejsorg),
下载完成后，双击默认安装。安装程序会自动添加环境变量
检测nodejs是否安装成功。打开cmd命令行 输入 node - v 显示当前版本号
检查npm是否安装。由于新版的NodeJS已经集成了npm，所以之前npm也一并安装好了。同样可以使用cmd命令行中键入 npm -v
npm作为一个NodeJS的模块管理，之前我由于没有系统地看资料所以导致安装配置模块的时候走了一大段弯路，所以现在很有必要列出来记录下。我们要先配置npm的全局模块的存放路径以及cache的路径，例如我希望将以上两个文件夹放在NodeJS的主目录下，便在NodeJs下建立“node_global”及“node_cache”两个文件夹。我们就在cmd中键入两行命令：
npm config set prefix "D:\Program Files\nodejs\node_global"
和
npm config set cache "D:\Program Files\nodejs\node_cache"
下面这一步非常关键，我们需要设置系统变量。进入我的电脑→属性→高级→环境变量。在系统变量下新建“NODE_PATH”，输入“D:\Program Files\nodejs\node_global\node_modules”。
安装bower, npm install bower -g; -g表示全局
输入 node，
require('bower') 显示如下表示 安装成功！

基于当前less跟less-loader版本如下
1安装less跟less-loader

2安装style-resources-loader 和 vue-cli-plugin-style-resources-loader

3修改vueconfigjs如下

4重启项目

启动成功，没有报错

来自：天蓝蓝tao >以下是less的用法：
1、查看文件内容：在终端中输入less文件名，即可打开文件并查看文件的内容，例如：lessexampletxt。
2、向下滚动：使用空格键或PageDown键可以向下滚动一屏。
3、向上滚动：使用b键或PageUp键可以向上滚动一屏。
4、向下一行滚动：使用j键可以向下滚动一行。
5、向上一行滚动：使用k键可以向上滚动一行。
6、跳转到文件开始处：输入g键，即可跳转到文件的开始处。
7、跳转到文件结尾处：输入Shift+g键，即可跳转到文件的结尾处。
8、搜索文本：在less界面中输入/文本关键字，即可搜索文件中出现该关键字的位置，例如：/hello可以搜索文件中包含hello的位置。

在VUE项目中，选择UI框架的时候。我一般都是element-ui选择sass，ant design of vue我选择是less。下面我们来看下如何配置，我这里使用的是vue-cli@45，vue@26。我使用的是淘宝镜像安装

相对于less而言，配置sass要简单的多了。
1、安装 node-sass 、 sass-loader

2、再 vueconfigjs 中配置

1、安装 less or node-less 、less-loader 、 style-resources-loader 、 vue-cli-plugin-style-resources-loader

2、配置 vueconfigjs

3、less虽然再 vueconfigjs 中被引用了，还需要再 mainjs 中引用才可以使用

---