使用 Angular CLI 在 Angular 4 上配置 Webpack

Question

在我的应用程序中，我想使用 SASS 和一些使用 NPM 加载的前端库。要设置捆绑，我需要使用像 Webpack 这样的工具。

起初，我试图找到 Angular-CLI 使用的 Webpack 配置文件。后来发现Angular-CLI是想让你免去配置。但我的问题是，在我可以运行我的应用程序之前，我需要配置 SASS 转译等，并且手动运行ning 一些命令确实不是一个好主意。我通常使用 ng serve，顾名思义，让我测试我的应用程序 + 监视更改并应用更改。我想要做的是，运行在此过程中检测到更改时执行的一些脚本。我该如何解决这个问题？

更新：

编译SASS是我必须解决的事情之一，已经解决了。我还想运行 Autoprefixer 并在构建时打包一些 node_modules。最好的方法是什么？

Answer 1

Angular cli 支持 sass 并且开箱即用。您可以配置 --style 到 ng new 或简单地编辑 .angular-cli.json

"defaults": {
    "styleExt": "scss",  // or sass; both are accepted
}

如果您想查看完整选项，只需列出帮助：

ng help

当然如果你想要完全控制，你可以通过运行 ng eject:

得到一个标准的webpack配置

ng eject

随时。

Answer 2

因此，经过数小时的文档搜索、谷歌搜索等，我能够解决上面列出的每一个问题。很简单。

使用 CSS 预处理器

就像@NeilLunn 建议的那样，要使用 SCSS 或任何其他预处理器，您可以使用：

"defaults": {
    "styleExt": "scss" // or another pre-processor, or plain css itself.
}

可以在此处找到有关使用其他预处理器的更多信息：https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

正在项目中加载CSS/JS依赖项

这个非常简单。您可以查看如何 Bootstrap can be loaded for example here.

的示例

使用自动前缀

这是最痛苦的发现，但我终于找到了。事实证明，您所要做的就是 this right here，这确实奏效了！

使用 Angular CLI 在 Angular 4 上配置 Webpack

Configuring Webpack on Angular 4 with Angular CLI

build

npm

webpack-2

angular