Less的两种使用方式

一，浏览器用法，在页面中 引入 Less.js ，可在官网下载，或使用CDN

第一步，首先我们在项目下面新建一个less文件，命名为style.less，里面写入一些简单的less:

@width:100px;
@height:200px;
@bg_color:yellow;
.box{
	width: @width;
	height: @height;
	background-color: @bg_color;
}

第二步，然后在html页面head里面引用该less文件
<link rel="stylesheet/less" type="text/css" href="style.less" />

第三步，下载less.js文件，然后引入该文件。

<script src="你下载的less.js路径" type="text/javascript"></script>

注意，link 标签一定要在 less.js 之前引入，并且 link 标签的 rel 属性要设置为stylesheet/less。

另外，也可以不下载less.js,使用CDN的方式引用，将上面第三步引入文件换成下面这个即可

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>

具体如下，（注释那行是CDN方式引入）

二，命令行用法，在Vue-cli中使用less

第一步，安装less和less-loader，命令如下：

    npm install less less-loader --sava-dev

 

第二步，打开build/webpack.base.conf.js，然后在module.exports对象中添加依赖

    module.exports = {

        module: {

            rules: [

               {

                    test: /\.less$/,

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

                }

            ]

        }

第三步，在代码中的style标签中加上lang="less"，就可以使用less编写样式了

<style scoped lang="less">
@width:100px;
@height:200px;
@bg_color:yellow;
.box{
  margin: 0 auto;
	width: @width;
	height: @height;
	background-color: @bg_color;
	.borderpp();
}
</style>