1.在vue.config.js文件中配置

let path = require('path');
let stylePath = path.resolve(__dirname, './static/css/variable.less')
module.exports = {
    css: {
        loaderOptions: {
            less: {
                globalVars: {
                    "hack": `true;@import "${stylePath}"`
                }
            }
        }
    }
}

2.如果項目中沒有vue.config.js文件，就手動創建創建一個

配置中的路徑variable.less文件是你創建的變量

@color: #;
// 導出變量
:export {
    name: "less";
    color: @color;
}

3.配置完成後調用

需要在項目文件index.vue中使用，在style標籤裏面使用，style標籤要加lang="less"。在index.less文件中調用變量是編譯不了的。

<style lang="less">
    view{
        background:@color;
    }
</style>