Sass exports patterns within npm modules are not acknowledged by Angular's sass-resolvers with the use of `@use` at-rule

[lozandier]

Command

serve

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Given the following within a module's package.json, Angular's sass resolvers aren't working as expected with patterns defined in export objects with the use of @use / @import as expected with new Angular application breaking the principle of least surprise for Sass authors of all levels.

package.json

{
"name": "@example/core-styles",
"files": [
    "styles"
  ],
  "exports": {
    ".": {
      "sass": "./styles/_index.scss"
    },
    "./*.scss": {
      "sass": "./styles/*.scss"
    },
    "./*.sass": {
      "sass": "./styles/*.sass"
    }
  }

src/styles.scss

@use "@example/core-styles";
@use "@example/core-styles/base.scss" as base;

@include base.styles();

Expected Output

Both sass files are loaded

Actual Output

The index.scss file will load as expected but not the individual Sass modules within the same package written as-is unlike how the use of @use and @import is documented by the Sass programming language and the behavior of other sass resolvers historically–this includes [Sass's built-in package importer].

Instead, Angular sass resolvers force the sass files to be explicitly defined contrary to the intent of the sass glob patterns unlike other Sass resolvers (including sass's native pkg: npm package resolver) or import sass modules prefixed with _:

{
  "name": "@example/core-styles",
  "files": [
    "styles"
  ],
  "exports": {
    ".": {
      "sass": "./styles/_index.scss"
    },
    "./base.scss": {
      "sass": "./styles/_base.scss"
    },
    "./*.scss": {
      "sass": "./styles/*.scss"
    },
    "./*.sass": {
      "sass": "./styles/*.sass"
    }
  }
}

OR

@use "@example/core-styles";

// This is contradictory how Sass modules prefixed with _ are supposed to be imported! 
@use "@example/core-styles/_base.scss" as base;

@include base.styles();

I'm of the opinion this breaks the principle of least surprise for Sass authors of all levels, including even AI agents attempting to follow the spirit of how Sass modules are supposed to be work within the language's documentation and the documentation + bug issue of the langauge's built-in package manager.

Proposed Solutions

1. Angular sass-resolvers better respect export glob patterns associated with Sass

2. Angular default Sass module for all preset build variants (application, browser, and browser-esbuild goes ahead and support by default Sass's built-in package importer–or at minimum support the @use pkg:<module> syntax.

Sass's built-in package import is stable for some time now (at least about a year); it seems like an unnecessary or fruitless endeavor in 2025 for Angular dev tools to insist on a proprietary way for devs and/or sass stylesheet stakeholders to load Sass files in a new Angular application moving forward.

The use of Sass's built-in package import would resolve the issue consistent with other envrionments that support modern Sass as the following:

@use "pkg:@example/core-styles/base" as base;

Minimal Reproduction

Issue occurs with any attempt to build or run an Angualr app with this intended use of modules beyond the index sass file of a NPM Package consisting of Sass files

For example commands such as npm serve, npm build and so on.

Exception or Error

✘ [ERROR] Can't find stylesheet to import.
  ╷
2 │ @use "@example/core-styles/base.scss" as base;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  src/app/app.component.scss 2:1  root stylesheet [plugin angular-sass]

Your Environment

/ \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 19.2.0
Node: 23.3.0 (Unsupported)
Package Manager: npm 10.9.0
OS: darwin arm64

Angular: 19.2.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1902.0
@angular-devkit/build-angular   19.2.0
@angular-devkit/core            19.2.0
@angular-devkit/schematics      19.2.0
@schematics/angular             19.2.0
rxjs                            7.8.2
typescript                      5.6.3
zone.js                         0.15.0
    
Warning: The current version of Node (23.3.0) is not supported by Angular.

Anything else relevant?

No response

[alan-agius4]

Hi @lozandier, I tried this again and I was not able to replicate. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.