Is it possible to resolve SASS contained in a workspace library using an approach that is similar to resolving ts files from an application within the same workspace? For context I'll setup a real workspace as follows:
ng new theme-workspace --create-application=false
cd theme-workspace
ng g library theme
mkdir projects/theme/src/lib/styles
touch projects/theme/src/lib/styles/index.scss
ng g application playground
Within the directory projects/theme/src/lib/styles we will add the following content to index.scss.
$color: red;
And in order to include the style assets we need to update ng-package.json with an asset block like this:
"assets": [
{ "input": "src/lib/styles", "glob": "**/*.scss", "output": "styles" }
]
If we build this project library like this:
ng build theme
We see that dist/theme/styles contains index.scss.
We can access the generated ts component ThemeComponent like this from the playground.
import { ThemeComponent } from 'theme';
When using @use to import the SASS index.scss module is it possible to use a similar namespace?
For example if we try this from the playground styles.scss module it fails:
@use `theme/styles` as t;
This is the error.
SassError: Can't find stylesheet to import.
╷
2 │ @use 'theme/styles' as t;
Now we could resolve by using a relative file import, but I'm curious whether there's a "Shorthand" way of doing it that uses the library name space?
Currently this is not supported, but there is a feature request for it.