有沒有辦法將內聯sass應用到Angular2組件中？

我有一個基於webpack啓動器的角2項目（https://github.com/AngularClass/angular2-webpack-starter）。我試圖找出如何直接使用sass直接進入組件（不需要調用外部.scss文件）。我發現的每個例子都使用styleUrls和擴展名「.scss」來識別何時調用sass-loader。有沒有辦法將內聯sass應用到Angular2組件中？

來源

2017-02-04 Eddy

~~使用sass-loader：require("!raw-loader!sass-loader!./file.scss");這將返回從file.scss編譯的CSS代碼，解析SASS導入。~~

當指定styles: '//SASS style'時，webpack無法確定該樣式是否在SASS中，並且應該使用sass-loader。您將需要使用以下模式：

import styles from './styles.sass'; 
@Component({ 
    styles: styles 
})

來源

2017-02-06 08:56:02 simon04

我已經使用SASS裝載機'{測試：/\.scss$/，排除：/ node_modules /，裝載機：「原始裝載機」，「postcss -loader'，'sass-loader？sourceMap']}'在我的組件中結合'styleUrls：['./file.scss']'，但我想要的是能夠使用'樣式直接放入scss代碼：['... scss code ...']' – Eddy

是的，這就是爲什麼我問是否有一個技巧來調用sass-loader而不使用.scss文件。我們的目標是將我的TS，HTML和SCSS保留在小組件的相同文件中。 – Eddy

@ simon04你提到，webpack沒有辦法確定樣式是「SASS」，但是如何使用SASS語法「always」？有沒有辦法配置這個？ AFAIK，SASS是CSS3源兼容的。 – Bernard

有沒有辦法將內聯sass應用到Angular2組件中？

回答

相關問題