Skip to main content
GoodFirstPicks
DashboardIssuesReposLeaderboard

GoodFirstPicks by Leaveitblank © 2026

CreatorRequest a RepoPrivacy PolicyTerms of Service
Sass breaks when path aliases start with `#` | GoodFirstPicks

Sass breaks when path aliases start with `#`

vercel/next.js 2 comments 24d ago
View on GitHub
mediumopenScope: somewhat clearSkill match: maybeNext.jsTypeScriptReact

Why this is a good first issue

Sass path resolution fails with Node.js-compliant #-prefixed aliases.

AI Summary

The issue involves Sass failing to resolve path aliases that start with #, which is now a Node.js standard. The problem is reproducible but requires understanding both Sass module resolution and Next.js's build system. There's some maintainer discussion indicating potential confusion about related fixes.

Issue Description

Link to the code that reproduces this issue

https://github.com/porada/next-sass-path-alias-issue

To Reproduce

git clone https://github.com/porada/next-sass-path-alias-issue.git
cd next-sass-path-alias-issue

pnpm install
pnpm build # or `pnpm dev` (will fail)

If you revert the most recent commit in the test repository, pnpm build is going to succeed.

Current vs. Expected behavior

Node.js 14+ supports internal package path aliases, which are required to start with #.

Given that no other leading character is allowed, this is going to push projects away from conventional @aliases (or @/aliases) toward spec-compliant #aliases. Next.js-configured Sass currently fails to handle these paths.

With the custom alias "@stylesheets/*": ["./src/stylesheets/*"], @use "@stylesheets/foo" correctly loads the file at src/stylesheets/foo.scss.

However, when the alias is switched to "#stylesheets/*": ["./src/stylesheets/*"], Sass immediately throws an error:

Error: The default namespace "" is not a valid Sass identifier.

Recommendation: add an "as" clause to define an explicit namespace.
  ╷
1 │ @use "#stylesheets/foo";
  │ ^^^^^^^^^^^^^^^^^^^^^^^

@use "#stylesheets/foo" as foo doesn’t help either. This issue is reproducible with both Turbopack and Webpack on.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 25.2.0: Tue Nov 18 21:09:41 PST 2025; root:xnu-12377.61.12~1/RELEASE_ARM64_T6031
  Available memory (MB): 49152
  Available CPU cores: 16
Binaries:
  Node: 24.12.0
  npm: 11.7.0
  Yarn: 1.22.22
  pnpm: 10.15.1
Relevant Packages:
  next: 16.1.0-canary.20 // Latest available version is detected (16.1.0-canary.20).
  eslint-config-next: N/A
  react: 19.2.1
  react-dom: 19.2.1
  typescript: 5.9.3
Next.js Config:
  output: N/A

Which area(s) are affecte

GitHub Labels

WebpackTurbopackModule ResolutionCSS

Want to work on this?

Claim this issue to let others know you're working on it. You'll earn 20 points when you complete it!

Risk Flags

  • module resolution
  • Sass compatibility
Loading labels...

Details

Points20 pts
Difficultymedium
Scopesomewhat clear
Skill Matchmaybe
Test Focusedno