Angle-cli如何添加sass和或bootstrap？

Question

我正在尝试角度-cli，并试图在项目中获得sass和引导。我在wiki上读到你可以简单地做：

ng install sass

使用当前最新版本(beta.5)执行此操作会给我一个错误:

Install failed. Could not find addon with name: sass

我怎样才能以一种角度-cli 将处理索引页和 systemJS 的方式来安装引导程序和/或 sass？

Answer 1

将这些angular-cli.json行从

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

到

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

设置styleExt后

ng set defaults.styleExt scss

然后将＜code＞更改为src/style。csstosrc/style。sass和['app.component.css']to['app.component.sass']。它将按预期工作。

Answer 2

注：由于Angular CLI的变化，此答案已过期，请参考以下来自Woot的答案，该答案更为最新。

您需要通过npm i节点sass安装节点sass保存dev，然后在angular cli中更改styleExt。json转换为sass，或scss（也可以通过ng设置默认值。styleExt scss

至于引导，把它放在公共目录下（我使用一个名为style的子目录）并在索引中引用它.html

更新:同样，如果您想要变量文件，您可以将目录添加到< code > 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

如果有现有项目，角度为2到5

ng set defaults.styleExt scss

如果你的项目是角度6和7

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

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

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

补充文件https://angular.io/cli

希望这有帮助