Svelte Preprocess Sass Alias Import

svelte-preprocess-sass-alias-import

🗃 Import external stylesheets with the help of absolute paths.

Though this package might also work in a different environment that uses sass, it should be noted that it serves the legacy importer used by svelte-preprocess.

Setup

1. Import SassAlias from svelte-preprocess-sass-alias-import.

import { SassAlias } from 'svelte-preprocess-sass-alias-import';

2. Instantiate SassAlias and pass it an object containing your rules.

const alias = new SassAlias({
    $var: 'src/scss',
  @var: ["src", "scss"]
});

3. Add and bind the SassAlias instance to the project's preprocessor. (Sample usage with SvelteKit.)

// svelte.config.js
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: [
        preprocess({
            sass: {
                importer: [alias.resolve.bind(alias)],
            },
            scss: {
                importer: [alias.resolve.bind(alias)],
            }, // Use for both sass and or scss
        }),
    ],
};

export default config;

// vite.config.ts
// Only required if you want to import stylesheets into an already imported stylesheet

const config: UserConfig = {
    css: {
        preprocessorOptions: {
            sass: {
                importer: [alias.resolve.bind(alias)],
            },
            scss: {
                importer: [alias.resolve.bind(alias)],
            },
        },
    },
};

4. Import files using your predefined aliases.

<!-- *.svelte -->
<style lang="scss">
  @import "$var/main.scss";
</style>

<!-- *.svelte -->
<style lang="sass">
  @use "@var/main.scss"
</style>

// *.scss
@use '@var/main.scss';

Contribute

Install all (dev-)dependencies by running the following.

  npm i

Make sure husky is being installed too.

  npm run prepare

And off we go …

Build this project with the following.

npm run build

Contributions of any kind are very much appreciated.