angular-cli如何添加Sass和Bootstrap? [英] 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

使用当前最新版本(测试版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中的styleExt更改为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

对于引导程序，将其放置在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和Bootstrap?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！