Vue2.7.14迁移Vite后SFC中SCSS样式无法加载求助

问题根源 #

核心问题出在Vite的SCSS预处理器additionalData配置格式上：返回的字符串末尾未添加换行，导致组件自身的SCSS代码被错误拼接进预注入语句，引发语法解析异常——样式虽被注入到head标签，但无法正常作用于组件。手动逐个引入组件样式能生效，说明基础预处理器配置正常，只是自动加载逻辑被破坏。

修复步骤 #

1. 修正additionalData返回格式 #

在预注入的每一行代码末尾添加换行符，确保组件SCSS代码被识别为独立语句：

// vite.config.js
css: {
  preprocessorOptions: {
    scss: {
      additionalData: () => {
        let prepends = '';
        prepends += `$app: ${app};\n`;
        prepends += `@import "@/style.scss";\n`;
        prepends += `@import "@/assets/vite/scss/colors.scss";\n`;
        return prepends;
      }
    },
  },
},

2. 确认路径别名@配置 #

确保Vite已正确映射@到项目src目录，避免路径解析失败：

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue2';
import path from 'path';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  // 其他配置...
});

3. 保持SFC样式标签写法不变 #

组件内的style标签无需修改，维持原有写法即可：

<!-- searchbar.vue -->
<template src="./searchbar.html"></template>
<style lang="scss" src="./searchbar.scss"></style> 
<script>...</script>

原理说明 #

Vite的additionalData会将配置字符串插入到每个SCSS文件开头，若末尾无换行，组件SCSS代码会被拼接进最后一条预注入语句，导致SCSS语法解析错误。添加换行后，预注入语句与组件代码相互独立，组件样式可被正常编译并自动生效。

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