angular-cli 如何添加 sass 和或引导程序? [英] angular-cli how to add sass and or bootstrap?

问题描述

我正在尝试 angular-cli 并尝试在项目中获得 sass 和 bootstrap.我在 wiki 中读到，你可以简单地做:

I'm trying out angular-cli and trying to get sass and bootstrap in the project. I've read in the wiki that you can simply do:

ng install sass

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

Doing this with the current latest (beta.5) gives me an error:

Install failed. Could not find addon with name: sass

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

How can I go about installing bootstrap and or sass in a way that angular-cli will deal with the index page and systemJS?

推荐答案

注意:由于 Angular CLI 的变化，这个答案已经过时，请参考下面来自 Woot 的最新答案.

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 中更改 styleExtcode> 到 sass 或 scss (或者你可以通过 ng set defaults.styleExt scss

You need to install node-sass via npm i node-sass --save-dev then change your styleExt in angular-cli.json to either sass or scss (or you can set that via ng set defaults.styleExt scss

至于 bootstrap，将其放在 public 目录下(我使用名为 style 的子目录)并在 index.html 中引用它

As for bootstrap, place it under the public directory (I use a sub dir named style) and reference it within index.html

更新:此外，如果您想要拥有变量文件，您可以像这样将目录添加到 angular-cli-build.js...

UPDATE: Also if you'd like to have variables files you can add the directory to angular-cli-build.js like this...

return new Angular2App(defaults, {
  vendorNpmFiles: [
    ...
  ],
  sassCompiler: {
    includePaths: [
      'src/app/style' <-- directory for SASS reference files
    ]
  }
});

这篇关于angular-cli 如何添加 sass 和或引导程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！