angular-cli如何添加sass和/或bootstrap？

Question

我正在嘗試使用angular-cli並嘗試在項目中獲得sass和bootstrap。 我在維基中讀過你可以做的事情：

ng install sass

使用當前最新版本（beta.5）執行此操作會給出錯誤：

Install failed. Could not find addon with name: sass

我怎樣才能以angular-cli處理索引頁面和systemJS的方式安裝bootstrap或sass？

Answer 1

如果使用angular-cli創建項目，則會附帶一個scss預處理器。 如果你有樣式文件，你可以將ext更改為scss，ng服務將為你編譯它們。

使用cli創建項目時，您可以告訴它您要使用scss

ng new sassy-project --style=sass

如果您有一個Angular 2到5的現有項目

ng set defaults.styleExt scss

如果你的項目是Angular 6和7

ng config schematics.@schematics/angular:component.styleext sass

這些告訴cli當你使用scss樣式而不是css生成新組件時。 它不會添加編譯器或啟用編譯器，因為那里已有編譯器。

任何現有組件都需要重命名其樣式文件擴展名。

其他文檔https://angular.io/cli

希望這可以幫助

Answer 2

注意 ：由於Angular CLI的更改，此答案已過期，請參閱下面Woot中的答案，該答案更新。

你需要通過npm i node-sass --save-dev安裝node-sass ，然后將angular-cli.json更改為sass或scss （或者你可以通過ng set defaults.styleExt scss

至於bootstrap，將它放在public目錄下（我使用名為style的子目錄）並在index.html引用它

更新：另外如果您想要變量文件，可以將目錄添加到angular-cli-build.js就像這樣......

return new Angular2App(defaults, {
  vendorNpmFiles: [
    ...
  ],
  sassCompiler: {
    includePaths: [
      'src/app/style' <-- directory for SASS reference files
    ]
  }
});

Answer 3

改變這些angular-cli.json行

"apps": [
    {
        "styles": [
                "styles.css"
              ]
    }
]

至

"apps": [
    {
        "styles": [
                "styles.sass"
              ]
    }
]

設置styleExt后

ng set defaults.styleExt scss

然后將src/style.css更改為src/style.sass ，將['app.component.css']更改為['app.component.sass'] 。 它將按預期工作。

Answer 4

創建后用

ng create "project"

轉到項目目錄並嘗試使用

npm install sass

它會更新你的package.json

Answer 5

感謝Woot的回答，這個答案更適用於使用角度種子項目的.NET Core 2.0 / 2.1開發人員：

#get lastest SPA templates and make sure angular CLI is global
dotnet new --install Microsoft.DotNet.Web.Spa.ProjectTemplates::*
npm install -g @angular/cli

#create a new project, default for target framework doesn't seem to be working when .NET Core 2.1 SDK is Installed
dotnet new angular -f netcoreapp2.0 -o test-web-app

這個種子項目仍然使用bootstrap 3版本，因此需要下載bootstrap-sass（或者升級到bootstrap 4，其中包括基本節點模塊中的scss支持）：

npm install bootstrap-sass --save-dev

在.angular-cli.json文件中，更改樣式配置：

"styles": [
   "styles.css",
   "../node_modules/bootstrap/dist/css/bootstrap.min.css"
]

至：

"styles": [
   "styles.scss",
   "../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss"
]

正如Woot指出的那樣，在自動創建文件時，還應該通過以下方式執行角度cli配置的升級以創建scss文件而不是css文件：

ng set defaults.styleExt scss

並將styles.css文件重命名為styles.scss是必需的。

在撰寫本文時（1.7.0和5.2.0），角度CLI和角度版本也略有過時，因此這些答案在升級后可能會有所變化。 但截至目前，這是有效的，不需要做任何其他事情來允許：

dotnet run

支持自動編譯scss到css並通過ng服務提供引擎蓋下的文件。