angular-cli 如何添加 sass 和/或引导程序？

Posted 2023-02-22

【中文标题】angular-cli 如何添加 sass 和/或引导程序？

【英文标题】：angular-cli how to add sass and or bootstrap?

【发布时间】：2016-09-23 05:53:19

【问题描述】：

我正在尝试 angular-cli 并尝试在项目中获得 sass 和 bootstrap。我在wiki 中读到过，您可以简单地这样做：

ng install sass

使用当前最新版本（beta.5）执行此操作会给我一个错误：

Install failed. Could not find addon with name: sass

如何以 angular-cli 处理索引页面和 systemJS 的方式安装 bootstrap 和/或 sass？

【参考方案1】：

如果您使用 angular-cli 创建项目，它会附带一个 scss 预处理器。如果您有样式文件，您只需将 ext 更改为 scss，ng serve 就会为您编译它们。

当你使用 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

希望对你有帮助

【讨论】：

上面链接的自述文件描述了安装 Bootstrap，我发现它很有帮助。在自述文件中谈到安装 Bootstrap 时，它引用了“app[0].scripts”和“app[0].styles”。我不清楚这意味着什么，但更新“脚本”和“sytles”部分中的 angular-cli.json 文件似乎有效。这个答案说的几乎一样：how-to-add-bootstrap-to-an-angular-cli-project。寻找 Nelly Sattari 的答案。感谢您指点我阅读自述文件。

或ng new sassy-project --style=scss，如果你更喜欢scss而不是sass

你知道生成的css保存在哪里吗？

get/set have been deprecated in favor of the config command.

【参考方案2】：

感谢 Woot 的回答，这个答案更适合 .NET Core 2.0/2.1 开发人员通过以下方式使用 angular 种子项目：

#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 所指出的，在自动创建文件时升级 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 提供后台文件。

【参考方案3】：

注意：由于 Angular CLI 的变化，此答案已过时，请参阅以下来自 Woot 的最新答案。

您需要通过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
    ]
  
);

【讨论】：

我的印象是 ng install 处理了这一切。谢谢你的澄清。

没问题，还更新了如何添加参考文件。

ng 安装不再受支持（2017 年 2 月）

@gotofritz 很久没有支持了

【参考方案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']。它将按预期工作。

【参考方案5】：

创建后

ng create "project"

转到项目目录并尝试

npm install sass

它会更新你的 package.json

【讨论】：

仅使用npm install sass 只会将包安装到 node_modules 目录中，但不会更新 package.json 文件。要将其保存到 package.json，您需要使用-D 或-save-dev 标志将其保存为开发依赖项，甚至使用-S 或-save 将其保存为运行时依赖项。否则，将不会为任何新克隆安装该软件包，并且有被npm purge 清除的风险。

是的，应该是“npm install sass”而不是“ng install sass”。