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