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

不吃香菜的猪2025-10-28 9:53

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

/utils/screenSize.js

javascript 复制代码

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

vite.config.js

javascript 复制代码

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

css 复制代码

@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'.";
  }
}