Resolve tsconfig baseUrl and paths aliases in Sass and Less style imports - #17538
Open
matthewp wants to merge 3 commits into
Open
Resolve tsconfig baseUrl and paths aliases in Sass and Less style imports#17538matthewp wants to merge 3 commits into
matthewp wants to merge 3 commits into
Conversation
…essor imports Sass @use/@import and Less @import with tsconfig baseUrl and paths aliases were broken because Vite's CSS preprocessor resolvers don't use resolve.tsconfigPaths. The old resolve.alias approach with customResolver was removed in #17090 due to Vite 8 deprecation warnings. Fix: inject CSS preprocessor options via a config hook: - Sass/SCSS: loadPaths for baseUrl, custom findFileUrl importer for paths - Less: paths for baseUrl This handles all reported cases: - @use "colors.scss" (with extension via baseUrl) - @use "colors" (extensionless via baseUrl) - @use "partials" (underscore-prefixed partial _partials.scss via baseUrl) - @use "@styles/variables" (tsconfig paths alias) Fixes #15897
Extends the CSS preprocessor alias support so Less @import statements resolve tsconfig "paths" aliases (e.g. @import "@styles/variables"). Less's paths option only adds search directories and cannot map an alias prefix, so a custom Less FileManager plugin intercepts alias-prefixed imports and returns the resolved file directly. Completes the fix for #15897.
🦋 Changeset detectedLatest commit: 3b41132 The changes in this PR will be included in the next version bump. This PR includes changesets to release 400 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
github-actions
Bot
added
the
pkg: astro
…aliases # Conflicts: # pnpm-lock.yaml
Contributor
|
| 📦 Package | 📏 Size |
|---|---|
| less@4.8.0 | 3.2 MB |
| iconv-lite@0.4.24 | 335.9 kB |
| needle@3.5.0 | 329.8 kB |
| needle@2.9.1 | 227.4 kB |
| probe-image-size@7.3.0 | 70.2 kB |
| lodash.merge@4.6.2 | 54.1 kB |
| debug@3.2.7 | 53.3 kB |
| errno@0.1.8 | 18.1 kB |
| copy-anything@3.0.5 | 11.7 kB |
| make-dir@5.1.0 | 9.6 kB |
| parse-node-version@1.0.1 | 4.5 kB |
| debug@2.6.9 | Unknown |
| ms@2.0.0 | Unknown |
| prr@1.0.1 | Unknown |
| stream-parser@0.3.1 | Unknown |
Total size change: 4.3 MB
matthewp
marked this pull request as ready for review
July 28, 2026 17:36
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Changes
@use/@importin<style lang="scss|sass|less">now resolve tsconfigbaseUrlandpathsaliases, matching how these aliases already work in JS/TS. Fixes [v6] Sass file resolution no longer respects "baseUrl" in tsconfig.json #15897.loadPaths(baseUrl) + afindFileUrlimporter (paths); Less getspaths(baseUrl) + a customFileManagerplugin (paths). Less'spathsoption only adds search dirs and can't map an alias prefix, so the file manager intercepts alias-prefixed imports and returns the resolved file directly, mirroring Less's extension handling (.less/.css).@import "@alias/...", reported by @bdukes.Testing
alias-tsconfig-sassfixture and two tests asserting the aliased variable's color renders in the output (baseUrl andpathsalias).Docs