在前端vue项目引入less，使用less，在less引用外部文件，在less中使用变量

---

一、less是什么？

Less是一种CSS的扩展和动态样式表语言，CSS预处理器，可以在客户端或服务器端运行，帮助我们自定义，管理和重用网页的样式表。Less是一种开源语言，也是跨浏览器兼容的语言。

二、操作步骤

1.引入库

代码如下（示例）：

npm install less-loader@4.1.0 --save

完成引入Scss库显示如图
但是在启动项目的时候，依然报错
解决办法
在package.json文件中的dependencies直接写

"less": "^3.11.1",
"less-loader": "^4.1.0",

然后在cmd命令行中输入

npm install

完成之后
在build/webpack.base.conf.js的module属性的rules中配置如下代码

{
    test: /\.less$/,
    loader: "style-loader!css-loader!less-loader"
}

保存完成

2.设置style的lang属性

代码如下（示例）：

<style lang="less" scoped>

3.使用less

引用外部less文件时，要加@import，且需在末尾加分号
less的变量用 @ 符号
叠加样式

<style lang="less" scoped>
@import "../common/css/bodycss.css";
@import "../common/css/lessTest.less";
@margin: 10px;
#First {
  height: 100%;
  margin: @margin;
}

less 中的 calc

height:calc(~“100% - 50px”);

总结

good morning