SvelteKit无webpack配置时，如何在JS中正确导入SCSS变量？

问题原因 #

你导入SCSS文件后得到原始:export字符串，是因为SvelteKit默认未正确处理SCSS的导出块，需要配置预处理器和Vite的CSS处理规则。

解决方法 #

方法1：使用CSS模块（最简单）

1. 将pallete.scss重命名为pallete.module.scss（SvelteKit/Vite会自动识别为CSS模块）
2. 安装必要依赖（未安装的话执行）：

npm install -D sass

3. 在组件中导入：

import palette from '$src/style/pallete.module.scss';

此时palette是一个JS对象，可直接通过palette.mainColor访问对应颜色值。

方法2：配置SvelteKit/Vite处理全局SCSS导出

若不想修改文件名，可通过svelte.config.js配置Vite的CSS规则：

1. 安装sass依赖：

npm install -D sass

2. 修改svelte.config.js，添加Vite的CSS预处理器配置：

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

export default {
  preprocess: vitePreprocess(),
  kit: {
    vite: {
      css: {
        preprocessorOptions: {
          scss: {
            // 可选：添加全局SCSS变量自动导入，无需每个文件手动引入
            // additionalData: `@import "$src/style/global-vars.scss";`
          }
        },
        modules: {
          localsConvention: 'camelCaseOnly' // 可选：将kebab-case变量名转为驼峰格式
        }
      }
    }
  }
};

3. 重启开发服务器后，重新导入SCSS文件即可得到JS对象：

import palette from '$src/style/pallete.scss';

验证结果 #

导入后执行console.log(palette)，会得到如下格式的对象：

{
  mainColor: "#e8d44d",
  mainColorHover: "#c0aa1d",
  mainColorContrast: "#1e1e1e",
  mainContrastDark: "#000000"
}

内容的提问来源于stack exchange，提问作者Luís Henrique de Almeida