在 Vue 中如何自动导入项目中的 less 和 scss 变量和文件
在开发时每次使用公共的 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>