https://github.com/lucagoslar/svelte-preprocess-sass-alias-import
🗃 Import external stylesheets with the help of absolute paths.
https://github.com/lucagoslar/svelte-preprocess-sass-alias-import
absolute alias import sass scss svelte-preprocess sveltekit
Last synced: 2 months ago
JSON representation
🗃 Import external stylesheets with the help of absolute paths.
- Host: GitHub
- URL: https://github.com/lucagoslar/svelte-preprocess-sass-alias-import
- Owner: lucagoslar
- License: mit
- Created: 2022-03-14T19:50:05.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-01-20T18:15:24.000Z (over 3 years ago)
- Last Synced: 2025-08-03T10:08:50.655Z (11 months ago)
- Topics: absolute, alias, import, sass, scss, svelte-preprocess, sveltekit
- Language: TypeScript
- Homepage:
- Size: 143 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## 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](https://sass-lang.com/documentation/js-api/modules#LegacyImporter) used by [svelte-preprocess](https://github.com/sveltejs/svelte-preprocess).
[](https://github.com/lucagoslar/svelte-preprocess-sass-alias-import/actions/workflows/main.yml)
## Setup
1. Import `SassAlias` from `svelte-preprocess-sass-alias-import`.
```ts
import { SassAlias } from 'svelte-preprocess-sass-alias-import';
```
2. Instantiate `SassAlias` and pass it an object containing your rules.
```ts
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.)
```js
// 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;
```
```ts
// 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
@import "$var/main.scss";
```
```svelte
@use "@var/main.scss"
```
```scss
// *.scss
@use '@var/main.scss';
```
## Contribute
Install all (dev-)dependencies by running the following.
```
npm i
```
Make sure [husky](https://github.com/typicode/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.