I have an Angular 14 app which is built as part of an existing ASP.NET MVC Core app in Visual Studio. The angular project is a folder in the existing MVC application, so my project looks a little like this:
.
├── Program.cs
├── Startup.cs
├── Controllers
├── Views
├── ...
├── Angular
│ ├── node_modules
│ ├── src
│ ├── content
│ │ └── styles
│ │ ├── styles.scss
│ │ └── _palette.scss
│ ├── angular.json
│ ├── tsconfig.json
│ └── package.json
This has all worked well up to the point of adding angular material themes. Adding a theme as below in styles.scss:
@use '@angular/material' as mat;
// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@import '@angular/material/_theming';
@import '_palette.scss';
$Angular-primary: mat-palette($palette-primary, 500);
$Angular-accent: mat-palette($palette-secondary, 500);
$Angular-theme: mat-light-theme($Angular-primary, $Angular-accent);
@include angular-material-theme($Angular-theme);
This throws an Error: Can't find stylesheet to import. error on the @angular/material component in Visual Studio. Easy, reference it directly with @use '../../node_modules/@angular/material' as mat;, and use the same for the _theming stylesheet with @import '../../node_modules/@angular/material/_theming'; But this then throws another error if the referenced stylesheets:
Error Error: Can't find stylesheet to import.
╷
1 │ @use '@angular/cdk';
│ ^^^^^^^^^^^^^^^^^^^
╵
Angular\node_modules\@angular\material\core\style\_menu-common.scss 1:1 @forward
Angular\node_modules\@angular\material\_index.scss 33:1 @use
Angular\Content\styles\styles.scss 1:1 root stylesheet
Angular/cdk is in my package references and exists in the node_modules. It seems that any stylesheets referencing @angular/* don't resolve correctly, even referenced stylesheets in the node_modules folder. I've attempted to add the includePaths config into my angular.json but with no effect (I've tried node_modules, ./node-modules, ./node-modules/@angular):
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "../wwwroot/Angular",
"index": "./src/index.html",
"main": "./src/main.ts",
"polyfills": "./src/polyfills.ts",
"tsConfig": "./src/tsconfig.app.json",
"styles": [
"./Content/styles/styles.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"./node-modules"
]
}
...
All included node packages in typescript (including @angular/material) build correctly, but not those referenced in .scss files.
What's interesting is that if I call ng serve from the /Angular folder, ng serve builds the app correctly and the styles (including my custom theme and palette) work as expected. It seems that Visual Studio can't resolve the path for scss files, but calling ng build directly can. Both visual studio and ng build work for the typescript references.
In ts.config I can add paths aliases like so for use in .ts files:
"paths": {
"@components/*": [ "./app/components/*" ],
"@models": [ "./app/models/index.ts" ],
...
And I effectively need something like that for the stylesheets to reference the styles found in the node_modules. I thought the includePaths in angular.json might have been an equivalent, but it doesn't appear to do anything. Any suggestions?
