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

Question

在Nuxt中，我使用Style Resources package来使SCSS在全局范围内可用，并且我可以在任何组件中访问变量和混合。在SvelteKit中如何做到这一点？

- system0102

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

- cs.edoardo

Answer 2

对于我的情况，我创建了一个带有不同变量文件（例如colors.sccs等）的文件夹，在src文件夹中，并将其导入到主CSS文件app.scss中，就像文件顶部所示：

@use "./colors";

我在__layout.svelte中导入了app.scss，然后我可以在每个组件中使用我的变量和样式规则，就像这样：

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

</style>

- Deotyma

---

谢谢，这就是我想出来的解决方案。我在这里详细说明了我的全部代码以及如何全局导入样式：https://dev59.com/5MXsa4cB1Zd3GeqPrrIP#75555487 - Cyril