title: SassError: Can't find stylesheet to import. @use '~@angular/material' as mat;
body: <p>I created an Angular project using the CLI. I'm using SCSS, and I included Angular Material with a custom theme iirc. I added a couple dummy components, and the app still built fine. Then I needed to style my components using Angular Material. In order to do so, I added <code>@use '~@angular/material' as mat;</code> to the first line of my <code>style.scss</code> file. Once I did this, the app will no longer build. It always throws the following error:</p>
  <pre><code>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
  
  </code></pre>
  <p>I have no idea what I'm doing wrong; I was under the impression that importing Angular Material this way would just work. Am I doing something wrong?</p>
  <p>Here is my entire <code>style.scss</code> file if that's helpful:</p>
  <pre><code>@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 &quot;color&quot; or &quot;typography&quot;.
  $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, &quot;Helvetica Neue&quot;, sans-serif;
    background: $canvas;
    max-width: $bodyWidth;
    margin: auto;
    height: 100%;
    @include elevation(16);
  }
  </code></pre>
  <p>Here's my <code>angular.json</code> file:</p>
  <pre><code>{
    &quot;$schema&quot;: &quot;./node_modules/@angular/cli/lib/config/schema.json&quot;,
    &quot;version&quot;: 1,
    &quot;newProjectRoot&quot;: &quot;projects&quot;,
    &quot;projects&quot;: {
      &quot;myapp&quot;: {
        &quot;projectType&quot;: &quot;application&quot;,
        &quot;schematics&quot;: {
          &quot;@schematics/angular:component&quot;: {
            &quot;style&quot;: &quot;scss&quot;
          }
        },
        &quot;root&quot;: &quot;&quot;,
        &quot;sourceRoot&quot;: &quot;src&quot;,
        &quot;prefix&quot;: &quot;app&quot;,
        &quot;architect&quot;: {
          &quot;build&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:browser&quot;,
            &quot;options&quot;: {
              &quot;baseHref&quot; : &quot;/app/&quot;,
              &quot;deployUrl&quot;: &quot;/app/&quot;,
              &quot;outputPath&quot;: &quot;dist/myapp&quot;,
              &quot;index&quot;: &quot;src/index.html&quot;,
              &quot;main&quot;: &quot;src/main.ts&quot;,
              &quot;polyfills&quot;: &quot;src/polyfills.ts&quot;,
              &quot;tsConfig&quot;: &quot;tsconfig.app.json&quot;,
              &quot;aot&quot;: true,
              &quot;assets&quot;: [
                &quot;src/favicon.ico&quot;,
                &quot;src/assets&quot;
              ],
              &quot;styles&quot;: [
                &quot;src/styles.scss&quot;
              ],
              &quot;scripts&quot;: []
            },
            &quot;configurations&quot;: {
              &quot;production&quot;: {
                &quot;fileReplacements&quot;: [
                  {
                    &quot;replace&quot;: &quot;src/environments/environment.ts&quot;,
                    &quot;with&quot;: &quot;src/environments/environment.prod.ts&quot;
                  }
                ],
                &quot;optimization&quot;: true,
                &quot;outputHashing&quot;: &quot;all&quot;,
                &quot;sourceMap&quot;: false,
                &quot;extractCss&quot;: true,
                &quot;namedChunks&quot;: false,
                &quot;extractLicenses&quot;: true,
                &quot;vendorChunk&quot;: false,
                &quot;buildOptimizer&quot;: true,
                &quot;budgets&quot;: [
                  {
                    &quot;type&quot;: &quot;initial&quot;,
                    &quot;maximumWarning&quot;: &quot;2mb&quot;,
                    &quot;maximumError&quot;: &quot;5mb&quot;
                  },
                  {
                    &quot;type&quot;: &quot;anyComponentStyle&quot;,
                    &quot;maximumWarning&quot;: &quot;6kb&quot;,
                    &quot;maximumError&quot;: &quot;10kb&quot;
                  }
                ]
              }
            }
          },
          &quot;serve&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:dev-server&quot;,
            &quot;options&quot;: {
              &quot;browserTarget&quot;: &quot;myapp:build&quot;
            },
            &quot;configurations&quot;: {
              &quot;production&quot;: {
                &quot;browserTarget&quot;: &quot;myapp:build:production&quot;
              }
            }
          },
          &quot;extract-i18n&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:extract-i18n&quot;,
            &quot;options&quot;: {
              &quot;browserTarget&quot;: &quot;myapp:build&quot;
            }
          },
          &quot;test&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:karma&quot;,
            &quot;options&quot;: {
              &quot;main&quot;: &quot;src/test.ts&quot;,
              &quot;polyfills&quot;: &quot;src/polyfills.ts&quot;,
              &quot;tsConfig&quot;: &quot;tsconfig.spec.json&quot;,
              &quot;karmaConfig&quot;: &quot;karma.conf.js&quot;,
              &quot;assets&quot;: [
                &quot;src/favicon.ico&quot;,
                &quot;src/assets&quot;
              ],
              &quot;styles&quot;: [
                &quot;src/styles.scss&quot;
              ],
              &quot;scripts&quot;: []
            }
          },
          &quot;lint&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:tslint&quot;,
            &quot;options&quot;: {
              &quot;tsConfig&quot;: [
                &quot;tsconfig.app.json&quot;,
                &quot;tsconfig.spec.json&quot;,
                &quot;e2e/tsconfig.json&quot;
              ],
              &quot;exclude&quot;: [
                &quot;**/node_modules/**&quot;
              ]
            }
          },
          &quot;e2e&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:protractor&quot;,
            &quot;options&quot;: {
              &quot;protractorConfig&quot;: &quot;e2e/protractor.conf.js&quot;,
              &quot;devServerTarget&quot;: &quot;myapp:serve&quot;
            },
            &quot;configurations&quot;: {
              &quot;production&quot;: {
                &quot;devServerTarget&quot;: &quot;myapp:serve:production&quot;
              }
            }
          }
        }
      }
    },
    &quot;defaultProject&quot;: &quot;myapp&quot;,
    &quot;cli&quot;: {
      &quot;analytics&quot;: &quot;0ded4b78-d900-44ea-8ad2-b5cbba677e06&quot;
    }
  }
  </code></pre>