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

注意：由于Angular CLI的更改，此答案已过期，请参阅Woot中的答案，该答案更新。

您需要通过node-sass安装npm i node-sass --save-dev，然后将angular-cli.json中的styleExt更改为sass或scss（或者您可以通过{{ 1}}

至于bootstrap，将它放在ng set defaults.styleExt scss目录下（我使用名为public的子目录）并在style

中引用它

<强>更新此外，如果您想要变量文件，可以将目录添加到index.html，就像这样......

angular-cli-build.js

Answer 2

从

更改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 3

使用

创建后

ng create "project"

转到项目目录并尝试

npm install sass

它会更新你的package.json

Answer 4

您可以使用此主题查看如何将bootstrap添加到angular-cli项目

How to add bootstrap to an angular-cli project

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 。

在撰写本文时，角度CLI和角度版本也已经过时（1.7.0和5.2.0），因此一旦升级，此答案可能会更改。 但是到目前为止，仍然有效，不需要做其他任何事情来允许：

dotnet run

支持自动将scss编译为css，并通过 ng serve 在后台提供文件。

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

5 个答案: