在Svelte+Vite中使用SCSS报“Colon is expected”错误求排查

核心问题：配置冲突与预处理器未正确关联 #

你的问题根源在于svelte.config.js和vite.config.js的预处理器配置重复且不匹配，导致Svelte无法正确识别SCSS嵌套语法，抛出“Colon is expected”错误（这是CSS解析器遇到SCSS专属语法时的标准报错）。

修复步骤 #

1. 统一预处理器配置，删除重复项 #

保留svelte.config.js作为Svelte预处理器的核心配置文件，移除vite.config.js中svelte插件内的preprocess配置，避免冲突。

修改后的vite.config.js：

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import path from 'path';

export default defineConfig({
  plugins: [svelte()], // 移除内部的preprocess配置
  css: {
      preprocessorOptions: {
          scss: {                                  
              additionalData: `
              @use './src/lib/scss/mixins' as *;
              @use './src/lib/scss/variables' as *;
          `,
          }
      }
  },
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"), // 补充__dirname，确保路径指向项目内的src目录
    },
  }
});

修改后的svelte.config.js：

import sveltePreprocess from 'svelte-preprocess';

export default {
  preprocess: sveltePreprocess({
    scss: {
      // 可根据需求配置组件内SCSS的额外选项，如sourceMap
    }
  })
};

注意：原配置中svelte.config.js使用vitePreprocess是错误的——vitePreprocess仅用于处理Vite全局CSS，无法解析Svelte组件内的SCSS语法，必须替换为svelte-preprocess。

2. 精简依赖安装 #

你之前多次重复安装依赖，只需确保以下两个核心依赖正确安装即可：

npm install svelte-preprocess sass --save-dev

无需安装scss包，sass已包含完整的SCSS编译能力（scss是sass的别名冗余包）。

3. 验证组件代码 #

你的Header.svelte中SCSS嵌套语法完全正确，修改配置后重启Vite开发服务器，即可正常编译。

额外注意事项 #

• 检查vite.config.js中additionalData的文件路径，确保mixins.scss和variables.scss确实存在于指定位置；
• 若全局样式仍无法生效，可尝试将additionalData中的路径改为绝对路径（基于项目根目录）。

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