vue/cli中less使用

webpack中引用公共less

第一步

npm install sass-resources-loader --save-dev

第二步

然后在build 的utils.js中找到less: generateLoaders(‘less’) 并更改为如下：

less: generateLoaders('less').concat({
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/assets/css/common.less')
        }
    })

path.resolve(__dirname, ‘…/src/assets/css/common.less’)路径即为自己对应的公共less文件，修改完配置文件记得重启服务器：npm run dev

第三步

使用：
在less文件中

@sidebar:240px;
@headerHeight:65px;
@bodyMinWidth: 700px;

在组件中

<style lang='less' scoped>
  .content {
    background:red;
    height:auto;
    margin-left: @sidebar;
    width: calc(100%-@sidebar);
  }
</style>