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

Question

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

标签： 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，您将在其中放置所有需要共享的全局变量。