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

Question

我正在尝试使用angular-cli并尝试在项目中获得sass和bootstrap.我在维基中读过你可以做的事情:

ng install sass

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

Install failed. Could not find addon with name: sass

我怎样才能以angular-cli处理索引页面和systemJS的方式安装bootstrap和sass？

Answer 1

如果使用angular-cli创建项目,则会附带一个scss预处理器.如果你有样式文件,你可以将ext更改为scss,ng服务将为你编译它们.

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

希望这可以帮助

Answer 2

注意:由于Angular CLI的更改,此答案已过期,请参阅下面Woot中的答案,该答案更新.

您需要安装node-sass通过npm i node-sass --save-dev然后改变你的styleExt angular-cli.json要么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
    ]
  }
});

Answer 3

改变这些线路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'].它将按预期工作.