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.