如何在SCSS中使用CSS变量，避免编译时被替换为固定值

你遇到的CSS变量var()表达式被强制替换为静态色值、出现undefined占位的问题，完全是webpack.mix.js配置中引入的postcss-css-variables插件导致的。该插件默认会把所有CSS自定义属性编译为静态值，同时做旧浏览器兼容降级，完全违背了你保留动态变量实现明暗模式切换的需求。

1. 移除错误的PostCSS插件配置 #

删除webpack.mix.js中options配置段里的postcss-css-variables相关配置，修改后的配置如下：

const mix = require('laravel-mix');
const fs = require('fs');
const webpack = require('webpack');

require('dotenv').config();

const domain = process.env.APP_URL.replace(/https?:\/\//, '');
const mixPath = 'theme_' + domain.replace(/\./g, '_');

if (mix.inProduction()) {
  mix.version();
}

mix.js('resources/themes/' + domain + '/js/app.js', 'public/' + mixPath + '/js')
  .vue()
  .sass('resources/themes/' + domain + '/css/app.scss', 'public/' + mixPath + '/css')
  // 删掉原有的options配置段，不需要引入postcss-css-variables
  .copyDirectory('resources/themes/' + domain + '/img/', 'public/' + mixPath + '/img');

mix.webpackConfig({
  plugins: [
    new webpack.DefinePlugin({
      __VUE_OPTIONS_API__: true,
      __VUE_PROD_DEVTOOLS__: false,
    }),
  ],
});

如果你还有其他PostCSS插件需要使用，只需要确保不引入任何会编译/降级CSS自定义属性的插件即可。

2. 可选：补全明暗模式覆盖逻辑 #

当前你的SCSS只覆盖了系统为亮色模式时强制切暗色的场景，建议补全系统为暗色模式时强制切亮色的逻辑：

// 追加这段配置
@media (prefers-color-scheme: dark) {
    body.forceLightMode {
        --color-primary: #{$color-primary};
        --color-primary-hover: #{$color-primary-hover};
    }
}

重新执行npm run dev或yarn dev编译代码，最终输出的CSS会保留var(--color-primary)表达式，不会再被替换为静态值，也不会出现undefined占位。你现有的JS切换body类名的逻辑可以直接正常生效，同时支持系统色彩偏好检测和用户手动覆盖配置。

内容的提问来源于stack exchange，提问作者netdjw