姓氏头像在线制作免费生成图片_东莞市建设质量监督站_西安百度推广网站建设_2022网站快速收录技术

在开发时每次使用公共的 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>