关于Vite配置preprocessorOptions.scss.additionalData全局引入scss文件无效问题

正确配置

//覆盖css配置
  css: {
    // CSS 预处理器
    preprocessorOptions: {
      // 定义全局 SCSS 变量
      scss: {
        // javascriptEnabled: true,
        additionalData: `
          @use "@/styles/variables.scss" as *;
        `
        // additionalData: '@import "@/styles/variables.scss";',
      }
    }
  },复制

问题描述 是不是觉得自己配置没问题 倒停了很久 @use “@/styles/variables.scss” as *; 最后的分号也加 哈哈看了网上好多说的 还是没解决我就纳闷了 。。。。

解决：

解决方式一：
发现配置确实没问题
github查找 才发

原来这不是一个bug，只有在main.js引入一个其他scss文件或者在.vue文件中使用<style lang="scss"><style>，并且里面有内容，则 scss.additionalData 配置的全局scss文件就可以正确引入了，还建议我们在 scss.additionalData 引入的文件最好只写scss变量，别写css变量，因为css变量是运行时属性。
故此
你只需要创建 一个其他scss 文件 在main 引入后，variables.scss全局声明的就生效了

解决方式二：
归根到底都是为了生成这种 才能var(–xxx)

所以啊
你直接不用Vite配置preprocessorOptions.scss.additionalData了
直接写一个css 文件，main 导入立马生效好吧 就可以var(–xxx)了

:root{
  --cx-font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  --cx-font-size:14px;
  --cx-theme-color:'#4e6ef2'
} 复制