SvelteKit - How to set up global SCSS accessible to all components?

This page summarizes the projects mentioned and recommended in the original post on

Our great sponsors
  • Appwrite - The Open Source Firebase alternative introduces iOS support
  • Scout APM - Less time debugging, more time building
  • SonarLint - Deliver Cleaner and Safer Code - Right in Your IDE of Choice!
  • style-resources-module

    Nobody likes extra @import statements!

    In Nuxt, I use the Style Resources package to make SCSS available globally and I can access variables and mixins in any component.

  • svelte-preprocess

    A ✨ magical ✨ Svelte preprocessor with sensible defaults and support for: PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript, Pug and much more.

    import preprocess from 'svelte-preprocess' import path, { dirname } from 'path' import { fileURLToPath } from 'url' import adapter from '@sveltejs/adapter-node' const filePath = dirname(fileURLToPath(import.meta.url)) const sassPath = `${filePath}/src/lib/style/` const config = { // Consult // for more information about preprocessors preprocess: preprocess({ scss: { prependData: `@import '${sassPath}_global-imports.scss';` } }), .... } export default config

  • Appwrite

    Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts