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>