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

Question

我正在试用 angular-cli 并尝试在项目中获取 sass 和 bootstrap。我在 wiki 中读到，您可以简单地执行以下操作：

ng install sass

使用当前最新的 (beta.5) 执行此操作会出现错误：

Install failed. Could not find addon with name: sass

我怎样才能以 angular-cli 处理索引页面和 systemJS 的方式安装 bootstrap 和/或 sass？

Answer 1

使用

创建后

ng create "project"

转到项目目录并尝试

npm install sass

它将更新您的 package.json

Answer 2

NOTE: This answer is out of date due to changes in the Angular CLI, please refer to the answer below from Woot which is more current.

您需要通过 npm i node-sass --save-dev 安装 node-sass，然后将 angular-cli.json 中的 styleExt 更改为 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 创建项目，它会附带一个 scss 预处理器。如果您有样式文件，您只需将扩展名更改为 scss，ng serve 将为您编译它们。

当您使用 cli 创建项目时，您可以通过

告诉它您想要使用 scss

ng new sassy-project --style=sass

如果您已有项目 Angular 2 到 5

ng set defaults.styleExt scss

如果你的项目是Angular6和7

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

这些告诉 cli，当您生成具有 scss 样式而不是 css 的新组件时。它不会添加编译器或启用编译器，因为那里已经有一个编译器。

任何现有组件都需要重命名其样式文件扩展名。

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

希望对您有所帮助

Answer 4

将 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 5

感谢 Woot 的回答，这个答案更适用于使用 angular 种子项目的 .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，其中包括 bootstrap 4 css 基本节点模块支持):

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 指出的那样，升级 angular cli 配置以在自动创建文件时创建 scss 文件而不是 css 文件也应通过以下方式执行：

ng set defaults.styleExt scss

并且需要将您的 styles.css 文件重命名为 styles.scss。

angular CLI 和 angular 版本在撰写本文时也略有过时（1.7.0 和 5.2.0），因此一旦升级，此答案可能会更改. 但截至目前， 这有效，无需执行任何其他操作即可：

dotnet run

支持将 scss 自动编译为 css 并通过 ng serve.

在后台提供文件

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

angular-cli how to add sass and or bootstrap?

angular-cli

angular