【Vue】自动注入Less变量

背景：我们在开发 Vue 项目时经常会用到 Less、Sass 等预编译 Css 技术。但是我们会遇到一个问题，每个使用的组件都得导入一次，书写麻烦且也不便于管理，我们能不能有一种方法，一键导入、全局使用呢？

Vue Cli 环境

• 分析

  Vue Cli 中对于样式的处理依赖webpack，webpack又依赖less-loader。那less-loader有没有提供某个配置来干预编译呢？

• 实现

// vue.config.js
module.exports = {
    css: {
        loaderOptions: {
            // 给 less-loader 传递 Less.js 相关选项
            less: {
                additionalData: `@import "~@/var.lcss";`,
            },
        },
    },
};

• 参考资料

  • Less-loader additionalData
  • 向预处理器 Loader 传递选项

Vite 环境

• 分析

  Vite 中对于样式的处理分为开发环境（esbuild）和生产环境（rollup）。我们需要的是两个环境都生效，所以我们得在共享选项配置中查找实现方案。

• 实现

export default defineConfig({
    resolve: {
        alias: {
            "@": path.resolve(__dirname, "src"),
        },
    },
    css: {
        preprocessorOptions: {
            less: {
                additionalData: `@import "@/var.lcss";`,
            },
        },
    },
});

• 参考资料

  • css-preprocessorOptions
  • resolve-alias