vue3 配置 less

下载依赖包

yarn add -D less less-loader

安装完之后就可以在代码中使用 less 编码了

<style lang="less" scoped>
.about {
  min-height: 100vh;
  .header {
    color: red;
    font-size: 3rem;
    border: 1px solid @border-color;
    border-radius: @border-radius;
  }
}
</style>

上面代码中使用了 less 变量，但是文件中并没有引入，这是怎么做到的呢？
进行如下配置即可

export default defineConfig({
    plugins: [
        Vue()
    ],
    // 其他配置项
    css: {
        preprocessorOptions: {
            less: {
                additionalData: '@import "../src/assets/variables.less";'
            }
        }
    }
})

上面 additionalData 的路径是存放 less 变量的文件路径。
这里就相当于全局引入了，不需要在每个用到变量的地方引入。