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

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')
      }
    }
  }
})

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

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

可以尝试检查以下几点:

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

• 这篇文章讲的很详细，请看：解决Vue在main.js全局引入scss文件，组件里使用scss变量报错问题

你配置的结构和官方文档的不一样啊

试试这个

css: {
    preprocessorOptions: {
      scss: {
        additionalData: Object.keys(scssVariables)
          .map(k => `\$${k.replace('_', '-')}: ${scssVariables[k]};`)
          .join('\n')
      }
    }
  }

在 vite.config.js 中配置 prependData 时，如果使用 Object.keys().map().join('\n') 的方式无效，可能是因为以下几种原因：

Object.keys() 方法没有正确地获取对象的键值：确保 Object.keys() 方法传入的参数是一个对象，并且该对象有可枚举的键值。

map() 方法没有正确地处理对象的键值：确保 map() 方法传入的回调函数能够正确地处理对象的键值，并返回有效的字符串。

join() 方法没有正确地拼接字符串：确保 join() 方法传入的参数是一个字符串，并且该字符串能够正确地拼接 map() 方法返回的字符串。

vite.config.js 中的 prependData 参数配置不正确：确保 prependData 参数的值是一个字符串，并且是符合要求的字符串。

检查Object.keys().map().join('\n') 在vite.config.js中是否在函数里面，且在export default里面

需要检查上述错误，并确保代码能够正确地执行，才能解决 prependData 配置无效的问题。