title: I chose sass in angular CLI while i was creating the new project. i want to change it to scss now. how can i do that?
body: <p>I need a step by step process to change SASS to SCSS in my angular project.I created a new project in angular. I was asked to chose any style sheet i want to use and i chose sass by mistake. while i was working on my project i realised it's sass and not SCSS. i want to use SCSS and i want to update that in my project. can you please tell me how to do that? i need step by step process.I tried to use few commands but then i started throwing error.</p>
  <p>my angular.json file looks like this</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;wordle_app_ppl&quot;: {
        &quot;projectType&quot;: &quot;application&quot;,
        &quot;schematics&quot;: {
          &quot;@schematics/angular:component&quot;: {
            &quot;style&quot;: &quot;sass&quot;
          },
          &quot;@schematics/angular:application&quot;: {
            &quot;strict&quot;: true
          }
        },
        &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;outputPath&quot;: &quot;dist/wordle_app_ppl&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;inlineStyleLanguage&quot;: &quot;sass&quot;,
              &quot;assets&quot;: [
                &quot;src/favicon.ico&quot;,
                &quot;src/assets&quot;
              ],
              &quot;styles&quot;: [
                &quot;./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css&quot;,
                &quot;src/styles.sass&quot;
              ],
              &quot;scripts&quot;: []
            },
            &quot;configurations&quot;: {
              &quot;production&quot;: {
                &quot;budgets&quot;: [
                  {
                    &quot;type&quot;: &quot;initial&quot;,
                    &quot;maximumWarning&quot;: &quot;500kb&quot;,
                    &quot;maximumError&quot;: &quot;1mb&quot;
                  },
                  {
                    &quot;type&quot;: &quot;anyComponentStyle&quot;,
                    &quot;maximumWarning&quot;: &quot;2kb&quot;,
                    &quot;maximumError&quot;: &quot;4kb&quot;
                  }
                ],
                &quot;fileReplacements&quot;: [
                  {
                    &quot;replace&quot;: &quot;src/environments/environment.ts&quot;,
                    &quot;with&quot;: &quot;src/environments/environment.prod.ts&quot;
                  }
                ],
                &quot;outputHashing&quot;: &quot;all&quot;
              },
              &quot;development&quot;: {
                &quot;buildOptimizer&quot;: false,
                &quot;optimization&quot;: false,
                &quot;vendorChunk&quot;: true,
                &quot;extractLicenses&quot;: false,
                &quot;sourceMap&quot;: true,
                &quot;namedChunks&quot;: true
              }
            },
            &quot;defaultConfiguration&quot;: &quot;production&quot;
          },
          &quot;serve&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:dev-server&quot;,
            &quot;configurations&quot;: {
              &quot;production&quot;: {
                &quot;browserTarget&quot;: &quot;wordle_app_ppl:build:production&quot;
              },
              &quot;development&quot;: {
                &quot;browserTarget&quot;: &quot;wordle_app_ppl:build:development&quot;
              }
            },
            &quot;defaultConfiguration&quot;: &quot;development&quot;
          },
          &quot;extract-i18n&quot;: {
            &quot;builder&quot;: &quot;@angular-devkit/build-angular:extract-i18n&quot;,
            &quot;options&quot;: {
              &quot;browserTarget&quot;: &quot;wordle_app_ppl: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;inlineStyleLanguage&quot;: &quot;sass&quot;,
              &quot;assets&quot;: [
                &quot;src/favicon.ico&quot;,
                &quot;src/assets&quot;
              ],
              &quot;styles&quot;: [
                &quot;./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css&quot;,
                &quot;src/styles.sass&quot;
              ],
              &quot;scripts&quot;: []
            }
          }
        }
      }
    },
    &quot;defaultProject&quot;: &quot;wordle_app_ppl&quot;
  }
  </code></pre>