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樣式表？

回答

相關問題