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