在Nuxt中,我使用Style Resources package来使SCSS在全局范围内可用,并且我可以在任何组件中访问变量和混合。在SvelteKit中如何做到这一点?
您应该使样式表在整个应用程序中可用。我个人正在使用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
,在其中放置需要共享的所有全局变量。
对于我的情况,我创建了一个带有不同变量文件(例如colors.sccs等)的文件夹,在src文件夹中,并将其导入到主CSS文件app.scss中,就像文件顶部所示:
@use "./colors";
我在__layout.svelte中导入了app.scss,然后我可以在每个组件中使用我的变量和样式规则,就像这样:
<style lang="scss">
@use "./colors";
.myClass {
color: colors.$myColor
}
</style>