Vite：vite.config.js中preprocessorOptions配置不生效问题排查

• 多余缩进/换行导致SCSS解析异常
  你当前配置里的additionalData包含了多余的换行和缩进，SCSS解析时可能会把这些空白当成语法的一部分，导致导入语句不生效。可以去掉多余空白，改成单行写法：

  css: {
      preprocessorOptions: {
          scss: {
              additionalData: `@import '@/assets/scss/main.scss';`,
          },
      },
  },
  

  或者用trim()去除首尾空白：

  additionalData: `
      @import '@/assets/scss/main.scss';
  `.trim(),
  

• SCSS预处理器的别名解析问题
  虽然你确认了Vite的别名配置正常，但SCSS预处理器本身的别名解析可能和Vite的别名逻辑不一致。可以尝试用绝对路径（相对于项目根目录）替换别名路径测试：

  additionalData: `@import './src/assets/scss/main.scss';`,
  

  如果这样能生效，说明需要给SCSS单独配置别名，可在preprocessorOptions.scss里添加includePaths来指定根目录，确保路径解析正常。

• Vite缓存导致配置未更新
  Vite会缓存编译结果，有时候修改配置后缓存没清理，导致新配置不生效。可以执行以下操作：

  • 删除项目根目录下的node_modules/.vite文件夹
  • 重启开发服务时加上--force参数：vite --force

• 其他配置/插件冲突
  检查项目中是否有其他CSS相关的插件（比如unplugin-vue-components、自定义PostCSS配置等），这些插件可能修改了CSS预处理器的配置，覆盖了你设置的additionalData。可以临时禁用这些插件，测试配置是否生效，逐步排查冲突源。

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