SCSS Alias
SCSS Alias is a lightweight Visual Studio Code extension that allows you to use Cmd+Click
(Mac) or Ctrl+Click
(Windows/Linux) to jump to SCSS files that use custom import aliases in @use
, @forward
, or @import
statements.
⚠️ This extension does not configure aliases for your SCSS compiler — it only helps resolve aliases inside VS Code for easier navigation.
✨ Features
- Supports SCSS and Sass syntax
- Resolves imports using aliases like
@scss/
or @mixins/
- Works with
@use
, @forward
, and @import
- Handles multiple SCSS resolution patterns including:
_filename.scss
_index.scss
- Direct
.scss
or .sass
file references
💡 Example Usage
Given this import:
@use '@mixins/spacing';
@use '@scss/components/button';
You can then Cmd+Click
or Ctrl+Click
to go directly to that file. The right click
and Go to definition
works too.
Resolves to src/scss/mixins/_spacing.scss
, src/scss/components/button.scss
or similar.
⚙️ Configuration
"vscodeScssAlias.aliases": {
"@scss": "src/scss",
"@mixins": "src/scss/mixins",
}
⚡ Commands
To run a command, open Command Palette Ctrl + Shift + p
or Cmd + Shift + p
on MacOS. Type SCSS Alias: and then select the command: Setup or Reload.
Setup
Open the Command Palette and type Rin SCSS Alias
, then click to add the settings into your .vscode/settings.json
file.
Run SCSS Alias: Setup Project Configuration
Reload
You can reload your settings using the command: Reload SCSS Aliases
Open the Command Palette and type Reload SCSS Aliases
, then click to reload the settings.
🚧 Note
This extension only affects your editor experience — you still need to configure these same aliases in your SCSS build system (e.g., webpack, Vite, Dart Sass CLI) for your project to compile correctly.
🧩 Contribution
Feel free to open issues or submit pull requests to improve functionality or add support for other use cases.
📜 License
MIT