vue3+vite 安装和配置less

1、 安装

// 安装less
npm i less-loader less --save-dev

2、 vite.config.js配置

css: {
        preprocessorOptions: {
            less: {
                modifyVars: {
                    hack: `true; @import (reference) "${path.resolve("src/assets/css/base.less")}";`,
                },
                javascriptEnabled: true,
            },
        },
    },

2、使用

<template>
    <div class="asd">
        1
        <p class="one">231</p>
    </div>
</template>
 
<script setup>
 
</script>
 
<style lang="less" scoped>
.asd{
    background-color: #111;
    .one{
        background: #f00;
        padding:@padding-md;
    }
}
</style>