Angular 2的前期编译器是否支持SASS样式表？

我想再次尝试使用Angular 2提前编译。Angular 2的前期编译器是否支持SASS样式表？

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

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

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

或者我应该首先我的风格转换为.css，并链接到CSS样式表呢？

The readme不讨论这个。

来源

2016-10-02 BeetleJuice

也许你不需要它了，但我发布了一个解决方案，以解决您的问题。干杯! –

SASS（.scss文件）未被提前编译器（ngc）成功处理。我有我的样式表转换为.css第一

来源

2016-10-04 18:53:11 BeetleJuice

这就是我想到的（ngc在处理sass文件时遇到问题），但是我想知道如何将这些sass文件转换为css文件，并且保持项目结构不变（即webpack不能/不可以）在这一步中使用）。你是怎么做到的和/或你使用了什么？ –

@ChristopheVidal每个组件的模板位于同一目录下的“.scss”文件中。该组件的'styleURLs'引用'.css'。在构建步骤中，sass文件被转换为css，并且css被内联。为了做到这一点，我使用[angular-seed]（https://github.com/mgechev/angular-seed/wiki/Working-with-SASS）设置。 – BeetleJuice

@BeetleJuice你知道如何用角度cli来完成吗？ –

@BeetleJuice答案不完全正确（或不再是正确的），你需要做的唯一的事情是为SASS/SCSS文件在你这样做装载机webpack.config.js：

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

，并在此之后，你可以直接包含你的组件里的青菜文件做：

styleUrls: ['app.style.sass']

要做到这一点，你必须安装SASS装载机：

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

来源

2017-01-17 17:34:29

这与提前编译有什么关系？这是普通的webpack – Dethariel

如果你通过webpack插件（AotPlugin）进行aot，你可以使用普通的webpack来支持sass文件。 –

嗨DaveDo你有一个例子 – LintonB

Angular 2的前期编译器是否支持SASS样式表？

回答

相关问题