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服务提供引擎盖下的文件。