如何在vue中使用less

客官°小女子只卖身不卖艺 2021-09-15 00:22 506阅读 0赞

转自：http://blog.csdn.net/lyt\_angularjs/article/details/76241626

仅用于学习，不可商用！

## 初始环境：npm+node ##

## CNPM: ##

如果安装速度过慢，请安装cnpm，然后将下列所有npm换成cnpm。命令行中输入：npm i -g cnpm --registry=https://registry.npm.taobao.org

## Vue新建项目： ##

npm i  -g  vue  vue-cli  webpack -g

解释：

此命令用于安装vue的基础环境  
i 表示install   
\-g表示全局安装  
webpack是官方推荐的打包工具

vue init webpack youProjectName

解释：

此命令用于创建项目

youProjectName处输入你项目的名字

project name 请输入项目的名字，直接回车就行

project description 请描述你的项目，默认使用vue的描述，直接回车就行

author 请输入作者，一般写你名字的缩写就行

vue build 请选择使用风格，回车选择默认的runtime+compiler就行

install vue-router 是否安装路由，回车安装

use eslint to lint your code ,是否安装eslint代码风格检查器，新手建议不安装输入n回车

后面几个测试的全部n回车

cd youProjectName

解释：

进入项目

npm i

解释：

根据package.json里面的设置安装默认的依赖

npm i iview axios qs babel-polyfill --save

解释：

安装ui插件iview

安装promise风格的ajax插件 axios

安装qs用于解析json

安装babel-polyfill用于支持esmascript6.0的promise

\--save表示运行时依赖这些环境

npm i stylus stylus-loader css-loader style-loader less-loader --save-dev

修改webpack.base.config中的配置

\{

test:  /\\.less $ /,

loader: "style-loader!css-loader!less-loader",

\},

![70][]

解释：

安装css预处理语音stylus和less用于编写css

\--save-dev表示编写时依赖这些环境但编译后运行时不再依赖

npm run dev

解释：

运行此项目

npm run build

解释：

使用webpack打包

打包结果在youProjectName下面的dist中

只需将dist目录放到tomcat中并设置主页为dist/index.html即可在线上环境运行

2。。。。或者下面的方法

**npm install less less\-loader --save-dev**

**安装成功后，打开 `build/webpack.base.conf.js` ，在 `module.exports =` 的对象的 module.rules 后面添加一段：**

1.  module. exports = \{
2.  
3.  module: \{
4.  rules: \[
5.  
6.  \{
7.  test: /\\.less$/,
8.  loader: "style-loader!css-loader!less-loader",
9.  \}
10. \]
11. \}
12.

[70]: /images/20210813/f83784a4124e44789b00bd9f2026e3b4.png

发表评论取消回复

表情：

评论列表（有 0 条评论，506人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue3使用less

文章目录 1、配置使用 2、遇到的问题 -------------------- 1、配置使用 > 以`less`为例 1.1 使用`vue

朱雀/ 2023年10月04日 13:07/ 0 赞/ 37 阅读

相关在react项目中使用less

在react项目中使用less 1. 安装依赖包：cnpm i --save-dev less less-loader （less 、less-loader两个包） 2

迷南。/ 2023年06月12日 09:27/ 0 赞/ 55 阅读

相关解决vue中如何套用less语句

只需要在style标签中加入这句话即可 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aH

素颜马尾好姑娘i/ 2022年11月30日 15:59/ 0 赞/ 123 阅读

相关 vue中使用Less全局变量

1、安装` `sass-resources-loader，安装less npm install sass-resources-loader --sav

Love The Way You Lie/ 2022年05月20日 10:26/ 0 赞/ 370 阅读

相关 vue+vue-cli中使用less

步骤一 npm install less less-loader --save 步骤二下面代码加在 webpack.base.conf.js

Love The Way You Lie/ 2022年05月09日 14:06/ 0 赞/ 289 阅读

相关 vue中使用less

vue中使用less > 首先vue开发环境已经安装成功当所有东西都准备好之后：第一步：安装less依赖，`npm install less less-l

怼烎@/ 2022年04月08日 13:19/ 0 赞/ 371 阅读

相关 vue 安装使用 less

使用vue-cli2创建的项目，如果直接将style标签中添加lang=“less”，会有一堆报错！！！ <style lang="less" scoped> </s

骑猪看日落/ 2021年11月23日 11:32/ 0 赞/ 434 阅读

相关在vue中应用less, less常用语法

安装： cnpm install less less-loader --save 配置loader: 找到配置文件：build/webpack.base.con

柔光的暖阳◎/ 2021年09月17日 08:04/ 0 赞/ 583 阅读

相关如何在vue中使用less

转自：http://blog.csdn.net/lyt\_angularjs/article/details/76241626 仅用于学习，不可商用！初始环境

客官°小女子只卖身不卖艺/ 2021年09月15日 00:22/ 0 赞/ 507 阅读

相关 vue 使用less

vue中使用less 1、在创建项目时使用less编译或者 1、安装 cnpm install -D less cn

妖狐艹你老母/ 2021年07月24日 15:14/ 0 赞/ 474 阅读