在开发时每次使用公共的 less 变量和类名，都要单独导入一下。当文件过多时，会让代码特别的冗余，设置自动导入后会方便很多。

正常使用：

<style scoped lang="less">
// 引入 less 文件
@import '@/styles/mixins.less';
@import '@/styles/variables.less';.box {background-color: @xtxColor;
}// 使用混合宏
.hover-item {.hoverShadow();
}
</style>

---

如何才能让 less变量和文件自动导入项目中呢？

• 找到 vite.config.ts 文件夹进行配置

export default defineConfig({css: {preprocessorOptions: {less: {additionalData: `@import '@/styles/mixins.less';@import '@/styles/variables.less';...要自动导入的less文件路径`,},},},
});

注意：如果设置之后，不能用，重新启动一些项目即可。

设置之后使用：

<style scoped lang="less">
.box {background-color: @xtxColor;
}// 使用混合宏
.hover-item {.hoverShadow();
}
</style>