在创建新项目时，我在 Angular CLI 中选择了 sass。我现在想把它改成scss。我怎样才能做到这一点？答案

【问题标题】：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?在创建新项目时，我在 Angular CLI 中选择了 sass。我现在想把它改成scss。我怎样才能做到这一点？
【发布时间】：2022-10-02 20:47:29
【问题描述】：

我需要一个逐步的过程来在我的 Angular 项目中将 SASS 更改为 SCSS。我在 Angular 中创建了一个新项目。我被要求选择任何我想使用的样式表，我错误地选择了 sass。当我在做我的项目时，我意识到它是 sass 而不是 SCSS。我想使用 SCSS，我想在我的项目中更新它。你能告诉我怎么做吗？我需要一步一步的过程。我尝试使用一些命令，但后来我开始抛出错误。

我的 angular.json 文件看起来像这样

  \"$schema\": \"./node_modules/@angular/cli/lib/config/schema.json\",
  \"version\": 1,
  \"newProjectRoot\": \"projects\",
  \"projects\": {
    \"wordle_app_ppl\": {
      \"projectType\": \"application\",
      \"schematics\": {
        \"@schematics/angular:component\": {
          \"style\": \"sass\"
        },
        \"@schematics/angular:application\": {
          \"strict\": true
        }
      },
      \"root\": \"\",
      \"sourceRoot\": \"src\",
      \"prefix\": \"app\",
      \"architect\": {
        \"build\": {
          \"builder\": \"@angular-devkit/build-angular:browser\",
          \"options\": {
            \"outputPath\": \"dist/wordle_app_ppl\",
            \"index\": \"src/index.html\",
            \"main\": \"src/main.ts\",
            \"polyfills\": \"src/polyfills.ts\",
            \"tsConfig\": \"tsconfig.app.json\",
            \"inlineStyleLanguage\": \"sass\",
            \"assets\": [
              \"src/favicon.ico\",
              \"src/assets\"
            ],
            \"styles\": [
              \"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css\",
              \"src/styles.sass\"
            ],
            \"scripts\": []
          },
          \"configurations\": {
            \"production\": {
              \"budgets\": [
                {
                  \"type\": \"initial\",
                  \"maximumWarning\": \"500kb\",
                  \"maximumError\": \"1mb\"
                },
                {
                  \"type\": \"anyComponentStyle\",
                  \"maximumWarning\": \"2kb\",
                  \"maximumError\": \"4kb\"
                }
              ],
              \"fileReplacements\": [
                {
                  \"replace\": \"src/environments/environment.ts\",
                  \"with\": \"src/environments/environment.prod.ts\"
                }
              ],
              \"outputHashing\": \"all\"
            },
            \"development\": {
              \"buildOptimizer\": false,
              \"optimization\": false,
              \"vendorChunk\": true,
              \"extractLicenses\": false,
              \"sourceMap\": true,
              \"namedChunks\": true
            }
          },
          \"defaultConfiguration\": \"production\"
        },
        \"serve\": {
          \"builder\": \"@angular-devkit/build-angular:dev-server\",
          \"configurations\": {
            \"production\": {
              \"browserTarget\": \"wordle_app_ppl:build:production\"
            },
            \"development\": {
              \"browserTarget\": \"wordle_app_ppl:build:development\"
            }
          },
          \"defaultConfiguration\": \"development\"
        },
        \"extract-i18n\": {
          \"builder\": \"@angular-devkit/build-angular:extract-i18n\",
          \"options\": {
            \"browserTarget\": \"wordle_app_ppl: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\",
            \"inlineStyleLanguage\": \"sass\",
            \"assets\": [
              \"src/favicon.ico\",
              \"src/assets\"
            ],
            \"styles\": [
              \"./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css\",
              \"src/styles.sass\"
            ],
            \"scripts\": []
          }
        }
      }
    }
  },
  \"defaultProject\": \"wordle_app_ppl\"
}

将其更改为 \"style\": \"sass\"

标签： angular sass scss-mixins

【解决方案1】：

在 .angular.json 中手动更改：

"schematics": {
  "@schematics/angular:component": {
    "styleext": "scss"
  }
}

【讨论】：

我这样做了，但随后它抛出错误``` "projectType": "application", "schematics": { "@schematics/angular:component": { "styleext": "scss" } }, ``` 你可以请参阅 styleext 抛出错误。它说属性 styleext 是不允许的
我在命令行 ng configSchematics.@schematics/angular:component.styleext scss 中运行了这个命令，但它引发了以下错误。架构验证失败并出现以下错误：数据路径“/schematics/@schematics~1angular:component”不得具有其他属性（styleExt）。
我已经尝试了所有这些。这就是为什么我在我的问题中明确提到我需要一个循序渐进的过程。如果我将 style.sass 更改为 style.scss，那么我也会收到编译错误。有人可以告诉我要逐步进行的每项更改吗？

【解决方案2】：

只需在生成您的应用程序时添加标志 ng new my-app --style=scss

--style=scss
--style=sass
--style=less

【讨论】：