Creé un proyecto Angular usando la CLI. Estoy usando SCSS e incluí material angular con un tema personalizado iirc. Agregué un par de componentes ficticios y la aplicación siguió funcionando bien. Luego necesitaba diseñar mis componentes usando material angular. Para hacerlo, agregué @use '~@angular/material' as mat; a la primera línea de mi archivo style.scss . Una vez que hice esto, la aplicación ya no se compilará. Siempre arroja el siguiente error:

 ERROR in ./src/styles.scss (./node_modules/css-loader/dist/cjs.js??ref--13-1!./node_modules/postcss-loader/src??embedded!./node_modules/resolve-url-loader??ref--13-3!./node_modules/sass-loader/dist/cjs.js??ref--13-4!./src/styles.scss) Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: Can't find stylesheet to import. ╷ 1 │ @use '~@angular/material' as mat; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ src/styles.scss 1:1 root stylesheet

No tengo idea de lo que estoy haciendo mal; Tenía la impresión de que importar material angular de esta manera simplemente funcionaría. ¿Estoy haciendo algo mal?

Aquí está mi archivo completo style.scss si eso es útil:

 @use '~@angular/material' as mat; // Custom Theming for Angular Material // For more information: https://material.angular.io/guide/theming @import '~@angular/material/theming'; // Plus imports for other components in your app. // Include the common styles for Angular Material. We include this here so that you only // have to load a single css file for Angular Material in your app. // Be sure that you only ever include this mixin once! @include mat-core(); // For each palette, you can optionally specify a default, lighter, and darker hue. $aphrodite-primary: mat-palette($mat-indigo); $aphrodite-accent: mat-palette($mat-pink, A200, A100, A400); // The warn palette is optional (defaults to red). $aphrodite-warn: mat-palette($mat-red); // Create the theme object. A theme consists of configurations for individual // theming systems such as "color" or "typography". $aphrodite-theme: mat-light-theme(( color: ( primary: $aphrodite-primary, accent: $aphrodite-accent, warn: $aphrodite-warn, ) )); // Include theme styles for core and each component used in your app. // Alternatively, you can import and @include the theme mixins for each component // that you are using. @include angular-material-theme($aphrodite-theme); /* You can add global styles to this file, and also import other style files */ @import '~normalize.css'; @import 'sassVars.scss'; html, body { height: 100%; } html{ background: $nullGray; min-width: 400px; } body { font-family: Roboto, "Helvetica Neue", sans-serif; background: $canvas; max-width: $bodyWidth; margin: auto; height: 100%; @include elevation(16); }

Aquí está mi archivo angular.json :

 { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "myapp": { "projectType": "application", "schematics": { "@schematics/angular:component": { "style": "scss" } }, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "baseHref" : "/app/", "deployUrl": "/app/", "outputPath": "dist/myapp", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "aot": true, "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.scss" ], "scripts": [] }, "configurations": { "production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, "budgets": [ { "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" }, { "type": "anyComponentStyle", "maximumWarning": "6kb", "maximumError": "10kb" } ] } } }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "options": { "browserTarget": "myapp:build" }, "configurations": { "production": { "browserTarget": "myapp:build:production" } } }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "myapp:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "src/test.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.spec.json", "karmaConfig": "karma.conf.js", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.scss" ], "scripts": [] } }, "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { "tsConfig": [ "tsconfig.app.json", "tsconfig.spec.json", "e2e/tsconfig.json" ], "exclude": [ "**/node_modules/**" ] } }, "e2e": { "builder": "@angular-devkit/build-angular:protractor", "options": { "protractorConfig": "e2e/protractor.conf.js", "devServerTarget": "myapp:serve" }, "configurations": { "production": { "devServerTarget": "myapp:serve:production" } } } } } }, "defaultProject": "myapp", "cli": { "analytics": "0ded4b78-d900-44ea-8ad2-b5cbba677e06" } }