Question

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

首先，我试图找到Angular-CLI使用的Webpack配置文件。后来，我发现Angular-CLI希望您免于配置。但我的问题是我需要在运行我的应用程序之前配置SASS转换等，并且手动运行一些命令并不是一个好主意。我通常使用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

So, after hours of searching through the documentations, googling, etc., I was able to solve every single problem listed above. It was simple.

Using CSS Preprocessors

Like @NeilLunn suggested, to use SCSS or any other preprocessor, you can use:

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

More information about using other pre-processor's can be found here: https://github.com/angular/angular-cli/wiki/stories-css-preprocessors

Loading CSS/JS dependencies in the project

This one was pretty straightforward. You can see an example of how Bootstrap can be loaded for example here.

Using Autoprefixer

This was the most painful one to find about, but I finally found it. Turns out, all you have to do is this right here and that actually worked!

使用Angular CLI在Angular 4上配置Webpack

2 个答案: