构建时变量注入：Vite 环境下 SCSS 与 JavaScript 的变量同步机制

实现在base.scs中使用 width 和 height 的值 

/utils/screenSize.js

export default {width: 1920 * 2,height: 1080
};

vite.config.js

import { defineConfig, loadEnv } from "vite";
import createVitePlugins from "./vite/plugins";
import screenSize from "./src/utils/screenSize.js";export default defineConfig(({ mode, command }) => {const env = loadEnv(mode, process.cwd());const { VITE_APP_ENV } = env;return {base: VITE_APP_ENV === "production" ? "/" : "/",css: { preprocessorOptions: {scss: {additionalData: `$wide-width: ${screenSize.wide.width};$wide-height: ${screenSize.wide.height};`}}}};
});

使用

base.scss

@use "sass:math";$inner-width: $wide-width;
$inner-height: $wide-height;@function changePx($px, $type: vw) {@if $type == vw {@return (math.div($px, $inner-width) * 100 + vw);} @else if $type == vh {@return (math.div($px, $inner-height) * 100 + vh);} @else {@error "Invalid type. Use 'vw' or 'vh'.";}
}