Vue css mixins、变量自动导入配置

Vue2

// vue.config.js

const path = require("path");

function addStyleResource(rule) {
  rule
    .use("style-resource")
    .loader("style-resources-loader")
    .options({
      patterns: [path.resolve(__dirname, "./src/assets/style/mixins.less")],
    });
}

module.exports = {
  publicPath: "./",
  productionSourceMap: false, // 生产打包时不输出map文件，加快打包速度
  devServer: {
    disableHostCheck: true,
    // https: true,
  },
  chainWebpack: (config) => {
    const types = ["vue-modules", "vue", "normal-modules", "normal"];
    types.forEach((type) =>
      addStyleResource(config.module.rule("less").oneOf(type))
    );
  },
}

Vue3

// vite.config.ts

import { defineConfig, ConfigEnv, UserConfig } from "vite";

// @see: https://vitejs.dev/config/
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
  return {
    ...
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "@/styles/var.scss";`
        }
      }
    }
    ...
  };
});