Best way to have global Sass overrides?

[thdoan]

The documentation gives an example of overriding variables for one component:

some-component.svelte

<style lang="scss">
  /* because the directory of `theme.scss` is in `includePaths` */
  @use 'theme.scss';

  div {
    color: theme.$main;
  }
</style>

If I'm overriding a variable that is used throughout the app, such as $button-radius, and I don't want to add @use 'theme.scss'; to every component that uses buttons, would I be able to implement a global theme.scss overrides by doing something like this?

svelte.config.js

const path = require('path');

module.exports = {
  preprocess: [
    sveltePreprocess({
      scss: {
        importer: makeAttractionsImporter({
          // specify the path to your theme file, relative to this file
          themeFile: path.join(__dirname, 'static/css/theme.scss'),
        }),
        // not mandatory but nice to have for concise imports
        includePaths: [path.join(__dirname, './static/css')],
        prependData: `@import 'theme.scss';`,
      },
    }),
  ],
};

(Source: https://stackoverflow.com/a/70166260/452587)

Or is there a better way?