从npm包导出SCSS文件

Question

我正在编写一个Angular 2应用程序。我将这个应用程序中的一个组件分离到了自己的npm包中，名为say ng2-wizard。该软件包包含我的组件代码及其在SCSS文件wizard.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加载器配置不匹配正确的路径。

Answer 1

最简单的方法就是直接在您的应用中要求您的SCSS文件。如果它的包装与NG2的向导模块，只需做你的代码如下：

import 'ng2-wizard/wizard.scss'; 

这就是它！ Webpack将把它拿起并添加到你的包中。您不必在ng2-wizard模块的代码中的任何地方引用wizard.scss。