vue-cli 创建的项目配置less

安装 less 和 less-loader

npm i less less-loader --save-dev

修改配置文件

找到 /client/build/webpack.base.conf.js 在 module 的rules对象中添加一个 rule

{
    test: /\.less$/,
    use: ['style-loader', {loader: 'css-loader', options: {importLoaders: 1}}, 'less-loader']
}

测试

如果编译没有报错且样式正常显示证明已经配置成功了

<style lang="less"> 
    .contents {
        width: 1200px;
        margin: 0 auto;
        #tabs {
            height: 70px!important;
            line-height: 70px;
        }
    }
</style>