Less（Leaner Style Sheets 的缩写）是一种向后兼容的 CSS 语言扩展。Less.js 是将 Less 样式转换为 CSS 样式的 JavaScript 工具。

安装依赖：less less-loader

npm i less less-loader -D

添加公共 less 样式文件 base.less

/src/assets/styles/base.less

@bg: #f7f7f7;
.p {
    color: red;
}

在 /vite.config.js 中配置 css 项

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

添加测试页 /src/view/test/less.vue

<template>
    <h3>Less样式</h3>
    <p>这使用了base.less的样式</p>
</template>
<style lang="less" scoped>
h3 {
    background-color: @bg;
}
p {
    .p()
}
</style>

在 /src/router/test.js 中添加路由

// ...
const pLess = () => import('@v/test/less.vue')
const testRoutes = [
    {
        path: '/less',
        name: 'less',
        meta: {
            title: 'less',
        },
        component: pLess,
    },
  // ...
]

在 /App.vue 中添加链接按钮

<template>
    <main>
        <nav class="nav">
            <router-link to="/less" active-class="on">less全局引入</router-link>
// ...

启动项目查看 npm run dev

----- End -----