SvelteKit - 如何使 SCSS 变量/混合对所有组件全局可用？

Question

在 Nuxt 中，我使用Style Resources 包使 SCSS 全局可用，并且我可以访问任何组件中的变量和 mixin。如何在 SvelteKit 中做同样的事情？

Answer 1

您应该使样式表可供整个应用程序使用。我个人正在使用svelte-preprocess。

为此，只需在 svelte 配置文件 ( svelte.config.js) 中设置一些参数，要求将某个文件导入到组件的每个子样式表中。

import preprocess from 'svelte-preprocess';

const config = {
    preprocess: preprocess({
        scss: {
            prependData: `@import './src/style/app.scss';`
        }
    })
    ...
};

然后app.scss您可以在其中导入任何其他文件，例如_variables.scss您要放置所有需要共享的全局变量的文件。

Answer 2

对于我的情况，我在文件夹 src 中创建了一个包含不同文件和变量（例如 color.sccs 等）的文件夹，并将其导入到主 css 文件 app.scss 中，如下文件顶部所示：

@use "./colors";

我在 __layout.svelte 中导入了 app.scss 之后，我可以在每个组件中使用我的变量和 maximes，就像我编写样式的地方一样：

<style lang="scss">
   @use "./colors";
   
   .myClass {
      color: colors.$myColor
   } 

</style>