今天在新工程里添加了一段样式代码代码突然报错了:

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.input-box {
border: 1px solid pink;
width: %;
max-width: 500px;
display: inline-block;
padding: 20px;
box-sizing: border-box;
& + .input-box {
margin-
top: 20px;
}

}
</style>

仔细一看提示less依赖没有装:

那么,怎么添加依赖呢?

第一步:

安装less依赖

npm install less less-loader --save

依赖装好了就不报错了,如果要支持外部less,可以继续配置:

第二步:

修改webpack.config.js文件,配置loader加载依赖,让其支持外部的less,在原来的代码上添加

{

test: /\.less$/,

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

},

Vue项目中如何使用less(添加less依赖)的更多相关文章

  1. vue项目中使用bpmn-为节点添加颜色

    内容概述 本系列 “vue项目中使用bpmn-xxxx” 分为五篇,均为自己使用过程中用到的实例,手工原创,目前属于陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意 ...

  2. vue 项目中运用到的插件 或者依赖安装

    1.安装less ,less-load npm install less less-loader --save-dev 2.安装vux npm install vux --save npm insta ...

  3. vue项目中使用bpmn-流程图预览篇

    前情提要 上文已经实现了节点操作的前进.后退.导入.导出等操作,今日来实现“流程图预览”,以及视图的放大缩小 前提:项目安装过bpmn,安装可见上篇文章 实现要点 bpmn提供了两个神器:Modele ...

  4. vue项目中使用bpmn-节点篇

    前情提要 根据之前的操作,我们可以创建.导入.导出流程图,并对其进预览.通过此篇可以学到: 为节点添加点击.鼠标悬浮等事件 获取流程图内所有指定类型的节点 通过外部更新节点名字 获取节点实例的两种方法 ...

  5. vue项目中使用bpmn-基础篇

    内容概述 本系列“vue项目中使用bpmn-xxxx”分为五篇,均为自己使用过程中用到的实例,手工原创,目前属于陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项 ...

  6. vue项目中使用bpmn-自定义platter

    前情提要 经过前四篇的学习,我们能够实现bpmn基本绘图.预览.为节点加事件加颜色等效果,这一篇我们来说,如何自定义左侧工具栏(platter),首先看一下自定义前后效果图对比: 我们本次要实现的目标 ...

  7. vue项目中使用bpmn-流程图xml文件中节点属性转json结构

    内容概述 本系列“vue项目中使用bpmn-xxxx”分为七篇,均为自己使用过程中用到的实例,手工原创,目前陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意事项,具 ...

  8. vue项目中使用bpmn-番外篇(留言问题总结)

    前情提要 “vue项目中使用bpmn-xxxx”系列的七篇文章在上周已经更新完成,发表后,有小伙伴在使用时提出了一些文章中没有讲到的问题,此篇作为番外篇,将大家提出的共性问题解答一下,欢迎大家支持原创 ...

  9. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  10. 在vue项目中如何添加eslint

    随着vue的越做越好,更多的开发者选择使用vue,本篇记录如何在vue项目中添加eslint. 首先第一种就是在vue项目创建初始时就选择了创建,随着初始化一起代入到了项目当中,那么要是一开始觉得es ...

随机推荐

  1. apacheAB测试指标

    在进行性能测试过程中有几个指标比较重要: 1.吞吐率(Requests per second) 服务器并发处理能力的量化描述,单位是reqs/s,指的是在某个并发用户数下单位时间内处理的请求数.某个并 ...

  2. Python 实现批量查询IP并解析为归属地

    一.背景: 最近工作中做了一个小功能,目的是为了分析注册用户区域分布和订单的区域分布情况.所以需要将其对应的IP信息解析为归属地,并同步每天同步更新.线上跑起来效率还是有优化的空间,优化的方向:在调用 ...

  3. BZOJ 3648 寝室管理

    [题解] GDOI2016 Day2T3 如果给出的数据是一棵树那么皆大欢喜直接点分治就好了,用树状数组维护大于x的数的个数.如果是一棵基环树,我们先断掉环上的一条边,然后跑点分治:再加上经过这条边的 ...

  4. HDU 5115 (2014ACM/ICPC亚洲区北京站) D题(Dire Wolf)

    题目传送门 设dp[i][j]为杀掉区间i到j之间的狼需要付出的最小代价,那么dp[i][j]=min{dp[i][k-1]+dp[k+1][j]+a[k]+b[i-1]+b[j+1]} Java代码 ...

  5. 【13】AngularJS 模块

    AngularJS 模块 模块定义了一个应用程序.(魔芋:也就是说一个ng-app代表一个应用程序,也就是一个模块,module) 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通 ...

  6. CodeForces 1000F One Occurrence

    You are given an array $a$ consisting of $n$ integers, and $q$ queries to it. $i$-th query is denote ...

  7. 20、Java并发性和多线程-Slipped Conditions

    以下内容转自http://ifeve.com/slipped-conditions/: 所谓Slipped conditions,就是说, 从一个线程检查某一特定条件到该线程操作此条件期间,这个条件已 ...

  8. CentOS 7: 配置Network

    Command Mode Step 1 » Network interface config files are located in /etc/sysconfig/network-scripts/  ...

  9. ubuntu Change Language

    慎用 所謂的語系(locale),其實包含語言及地區的設定,因為除了語言之外,國家與國家的日期表示方式.數字格式.貨幣符號.度量單位可能都不一樣,所以才會有了這個locale的發明,依照國家和語言給予 ...

  10. 可恢复的安全rm

    我们常常使用rm去删除一些文件.假设不小手一抖,那么就悲剧了.你们都懂的... 在经历过一次这种慘剧后.决定永远杜绝这种情况.重写写了shell函数.运行安全的rm.这个函数会把要删除的文件按日期备份 ...