從npm包導出SCSS文件

我正在編寫一個Angular 2應用程序。我將這個應用程序中的一個組件分離到了自己的npm包中，名爲say ng2-wizard。該軟件包包含我的組件代碼及其在SCSS文件wizard.scss中的樣式。從npm包導出SCSS文件

現在，我想在我的角度成分爲styleUrls或styles或某事，這SCSS風格，但
我想我應用程序的的WebPack這個SCSS轉換成CSS，使應用程序編碼器可以覆蓋如果需要，我的組件的SCSS變量。
我不想在我的ng2-wizard包中包含任何webpack內容，除非這是解決此問題的唯一方法。

我嘗試包括使用這兩種方式在我的組件SCSS文件：

// 1 
import './wizard.scss'; 

// 2 
@Component({ 
    // some component stuff... 
    styles: [require('./wizard.scss')], 
})

但在這兩種情況下的WebPack抱怨：Cannot find module wizard.scss。我想我必須export從我的npm包的SCSS文件以某種方式到我的應用程序，但如何？

編輯：

我想多一點挖進去。

加入後：

styleUrls: ['wizard.scss'],

我組分I獲得控制檯下面的錯誤。

../ng2-wizard/src/wizard/wizard.scss 
Module parse failed: <my-project-dir>/ng2-wizard/src/wizard/wizard.scss Unexpected token (1:15) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected token (1:15)

所以我想現在的問題是：如何判斷的WebPack編譯我的模塊中的所有SCSS文件？

好的。從以前的錯誤（注意../ng2-wizard）我想問題是我用npm link來開發我的npm-packaged組件，所以我的webpack加載器配置不匹配正確的路徑。

來源

2016-11-28 kub1x

最簡單的方法就是直接在您的應用中要求您的SCSS文件。如果它的包裝與NG2的嚮導模塊，只需做你的代碼如下：

import 'ng2-wizard/wizard.scss';

這就是它！ Webpack將把它拿起並添加到你的包中。您不必在ng2-wizard模塊的代碼中的任何地方引用wizard.scss。

來源

2016-11-28 15:40:50 Ambroos

感謝您的回覆（和rubberducking）。我想保留我的組件中的scss東西，只需啓用覆蓋那裏的變量。原來問題出在其他地方，所以猜想我稍後會刪除這個問題，因爲它只是有點麻煩= / – kub1x

從npm包導出SCSS文件

回答

相關問題