vue中使用less

首先，使用vue-cli快速建立一個vue project

二,  在該項目中安裝less及loader

$ npm install less less-loader --save-dev

關於何時使用“--save-dev”或者“--save”,參見 https://www.cnblogs.com/limitcode/p/7906447.html。因爲僅在開發下使用，這裏使用--save-dev.
安裝成功之後，在package.json之中，就會有了依賴。

"devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.5",
    "@vue/cli-plugin-eslint": "^3.0.5",
    "@vue/cli-service": "^3.0.5",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0-0",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "vue-template-compiler": "^2.5.17"
  },

三，可以在相應的組件中使用。如下，

<style lang="less" scoped>
    @width:10px;
    @height:@width+10px;

    .box{
        width:@width;
        height:@height;
    }

</style>

refs: https://blog.csdn.net/zmhawk/article/details/75209161