Angular 2 Ahead-of-Time 编译器是否支持 SASS 样式表？答案

【问题标题】：Does Angular 2 Ahead-of-Time compiler support SASS stylesheets?Angular 2 Ahead-of-Time 编译器是否支持 SASS 样式表？
【发布时间】：2017-01-18 01:34:29
【问题描述】：

我想再次尝试使用Angular 2 Ahead-of-Time 编译。

这需要我进行重大重构，因为我当前的设置使用需要更改的自定义构建过程。

在开始之前，我需要知道：如果我链接到 styleUrls 元数据中的外部 .scss 文件，AoT 编译器会工作吗？

@Component({
    ...
    styleUrls:['./app.component.scss'],
})
export class AppComponent {}

或者我应该先将我的所有样式转换为.css，然后链接到 CSS 样式表？

The readme 不讨论这个。

【问题讨论】：

也许您不再需要它，但我发布了解决您问题的方法。干杯！

标签： angular compilation sass angular-compiler-cli

【解决方案1】：

提前编译器 (ngc) 未成功处理 SASS（.scss 文件）。我必须先将我的样式表转换为.css

【讨论】：

这也是我发现的（ngc 在处理 sass 文件时遇到问题），但我想知道如何将这些 sass 文件转换为 css 文件，同时保持项目结构不变（即 Webpack 应该/不能在此步骤中使用）。你是怎么做到的和/或你用了什么？
@ChristopheVidal 每个组件的模板都在同一目录中的.scss 文件中。组件的styleURLs 指的是.css。在构建步骤中，sass 文件被转换为 css，并且 css 被内联。为此，我使用了angular-seed 设置。
@BeetleJuice你知道如何使用 Angular cli 完成这项工作吗？

【解决方案2】：

@BeetleJuice 的答案并不完全正确（或不再正确），您唯一需要做的就是在 webpack.config.js 中为 sass/scss 文件提供加载器：

{ test: /\.sass$/, loaders: ['raw-loader', 'sass-loader']}

在此之后，您可以将 sass 文件直接包含在组件中：

styleUrls: ['app.style.sass']

为此，您必须安装 sass-loader：

npm install sass-loader node-sass webpack --save-dev

【讨论】：

这与提前编译有什么关系？这是普通的 webpack
如果你通过 webpack 插件（AotPlugin）做aot，你可以使用普通的 webpack 来支持 sass 文件。
嗨，戴夫你有这个例子吗