背景 ：

因为项目中的文件特别多，有一些样式什么的，几乎会在每一个组件中都有用到，如果用的时候在每个组件都一一引入的话，过于麻烦了，这样的情况就可以使用自动导入的方式。这样相当于vue或者ts文件可以直接使用自动导入的文件内容。

定义要引入的文件

文件1.比如说项目的颜色属性 可以定义变量文件src目录下建文件assets/styles/variables.less

// 主题
@xtxColor: #27ba9b;
// 辅助
@helpColor: #e26237;
// 成功
@sucColor: #1dc779;
// 警告
@warnColor: #ffb302;
// 价格
@priceColor: #cf4444;

文件2.用less写一个函数，控制css样式
可以定义函数文件src目录下建文件assets/styles/mixins.less

// 鼠标经过上移阴影动画
.hoverShadow () {
    transition: all 0.5s;
    &:hover {
        transform: translate3d(0, -3px, 0);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    }
}

函数式写法还可以传递参数，比如

.hoverShadow (@y: -3px) {
    transition: all 0.5s;
    &:hover {
        transform: translate3d(0, @y, 0);
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    }
}

自动导入

因为这个项目是使用vite,没有再使用webpack。 修改 Vite 配置，vite.config.ts

export default defineConfig({
    css: {
        preprocessorOptions: {
            less: {
                additionalData: `
                    @import "@/assets/styles/variables.less";
                    @import "@/assets/styles/mixins.less";
                `,
            },
        },
    },
})

步骤到这标志着已经导入完毕
使用方式： 因为已经导入到了文件中，所以就可以直接使用了，比如：

<style lang="less" scoped>
    h1 {
        background-color: @warnColor;
        .hoverShadow();
    }
</style>