SvelteKit中SCSS模块无法预加载全局变量的问题求助

问题描述 #

我是Svelte新手，在SvelteKit项目中尝试配置全局SCSS（包含变量、混入）自动预加载到所有.module.scss文件，但本地运行时始终提示变量未定义错误。

项目文件结构 #

├── package-lock.json
├── package.json
├── playwright.config.ts
├── src
│   ├── app.d.ts
│   ├── app.html
│   ├── components
│   │   ├── Header
│   │   │   ├── Header.component.svelte
│   │   │   └── Header.module.scss
│   │   └── footer
│   ├── routes
│   │   ├── +layout.svelte
│   │   ├── home
│   │   │   ├── +error.svelte
│   │   │   └── +page.svelte
│   │   └── layout.module.scss
│   └── scss
│       ├── main.scss
│       ├── mixins.scss
│       └── variables.scss
├── static
│   └── favicon.png
├── svelte.config.js
├── tests
│   └── test.ts
├── tsconfig.json
└── vite.config.ts

当前配置文件 #

svelte.config.js #

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';
/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: [
        vitePreprocess({
            scss: {
                prependData: '@use"./src/scss/main.scss" as *;'
            }
        }),
    ],

    kit: {
        adapter: adapter()
    }
};

export default config;

vite.config.ts #

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [sveltekit()],
    test: {
        include: ['src/**/*.{test,spec}.{js,ts}'],
    },
    css: {
        preprocessorOptions: {
            scss: {
                prependData: `@use './src/scss/main.scss'as *;`,
            },
        },
    },
});

SCSS文件内容 #

main.scss #

@use "mixins";
@use "variables.scss";

variables.scss #

$color-black: #0A0A0A;

    $color-white: #f5f5f5;

    $font-primary:'Poppins',

    sans-serif;

错误信息 #

Internal server error: [sass] Undefined variable.
  ╷
4 │     background-color: $color-black;
  │                       ^^^^^^^^^^^^
  ╵
  src/components/Header/Header.module.scss 4:23  root stylesheet

package.json依赖片段 #

"version": "0.0.1",
    "private": true,
    "scripts": {
        "dev": "vite dev",
        "build": "vite build",
        "preview": "vite preview",
        "test": "playwright test",
        "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
        "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
        "lint": "prettier --plugin-search-dir . --check . && eslint .",
        "format": "prettier --plugin-search-dir . --write ."
    },
    "devDependencies": {
        "@playwright/test": "^1.28.1",
        "@sveltejs/adapter-auto": "^2.0.0",
        "@sveltejs/adapter-node": "^1.2.4",
        "@sveltejs/kit": "^1.15.9",
        "@sveltejs/vite-plugin-svelte": "^2.1.1",
        "@typescript-eslint/eslint-plugin": "^5.45.0",
        "@typescript-eslint/parser": "^5.45.0",
        "eslint": "^8.28.0",
        "eslint-config-prettier": "^8.5.0",
        "eslint-plugin-svelte": "^2.26.0",
        "prettier": "^2.8.0",
        "prettier-plugin-svelte": "^2.8.1",
        "sass": "^1.62.1",
        "svelte": "^3.54.0",
        "svelte-check": "^3.0.1",
        "tslib": "^2.4.1",
        "typescript": "^5.0.0",
        "vite": "^4.3.0"
    },
    "type": "module"

修复方案 #

1. 修正SCSS导入语法 #

Sass的@use指令默认会创建命名空间，若要让变量/混入全局可用，必须添加as *；同时导入文件时可省略.scss后缀：

// src/scss/main.scss
@use "mixins" as *;
@use "variables" as *;

2. 修复variables.scss语法错误 #

$font-primary的定义存在语法错误，修正为：

// src/scss/variables.scss
$color-black: #0A0A0A;
$color-white: #f5f5f5;
$font-primary: 'Poppins', sans-serif;

3. 统一预加载配置格式 #

确保svelte.config.js和vite.config.ts中的prependData语法一致（规范空格），避免解析问题：

• svelte.config.js中修改为：

  prependData: '@use "./src/scss/main.scss" as *;'
  

• vite.config.ts中修改为：

  prependData: '@use "./src/scss/main.scss" as *;'
  

4. 重启开发服务 #

修改配置文件后，需要重启vite dev服务，确保新配置生效。

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