别水回答vite.config.js中prependData: Object.keys().map().join('\n')配置无效

Question

vite.config.js中prependData: Object.keys(scssVariables).map(k => \$${k.replace('_', '-')}: ${scssVariables[k]};).join('\n')配置无效，scss文件里的scss变量需要使用js变量动态生成

我有一个js主题文件（上头给的，就得这么用），想在scss文件内引用其中的js变量

//js文件内：
export default
{
'color-bg-normal': '#AEAFB3'
  val:
  {
'color-bg-normal': '#AEAFB3'
  }
}

//scss文件
:root{
    --color-bg:$color-bg-normal;//不报错，也不显示颜色
}

@mixin color-bg {
    background-color:$color-bg-normal//报错
}

Error: Undefined variable.
╷
31 │ background-color:$color-bg-normal
│ ^^^^^^^^^^^^^^^^

vite.config.js已经按网上的修改了(加不加.replace('_', '-')都试过了两种）

const scssVariables = require('./src/assets/styleJS/darkBlack.js');
export default defineConfig({
 //...
  css: {
    preprocessorOptions: {
      //...
        prependData: Object.keys(scssVariables)
          .map(k => `\$${k.replace('_', '-')}: ${scssVariables[k]};`)
          .join('\n')
      }
    }
  }
})

不知道是我配置的问题，还是引用的问题。

Answer 1

具体原因可能是vite.config.js中的preprocessorOptions配置错误导致的。

可以尝试检查以下几点:

检查js文件中的变量名称是否正确，是否与scss文件中引用的变量名称一致。
检查vite.config.js中preprocessorOptions配置是否正确，特别是prependData和map()函数中的变量名称是否正确。
检查scss文件中是否有其他错误导致无法正常使用js文件中的变量。
检查项目中是否有其他配置或插件影响到了scss文件的正常使用。