在 Vue 中如何自动导入项目中的 less 和 scss 变量和文件

偷光2024-10-30 9:22

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

正常使用：

js 复制代码

<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 文件夹进行配置

js 复制代码

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

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

设置之后使用：

js 复制代码

<style scoped lang="less">
.box {
  background-color: @xtxColor;
}

// 使用混合宏
.hover-item {
  .hoverShadow();
}
</style>