从npm包

Question

我正在编写一个Angular 2应用程序。我将这个应用程序中的一个组件分离到它自己的名为ng2-wizard的npm包中。该软件包包含我的compoennt代码及其在SCSS文件wizard.scss中的样式。

• 现在我想在我的角度组件中包含此SCSS样式为styleUrls或styles或其他，但
• 我希望我的应用 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。我想我必须以某种方式从我的npm包中export SCSS文件到我的应用程序，但是如何？

编辑：

我尝试了一点点。

添加后：

styleUrls: ['wizard.scss'],

到我的组件我在控制台中遇到以下错误。

../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打包组件，所以我的webpack加载器配置与正确的路径不匹配。

Answer 1

最简单的方法是直接在您的应用中使用您的SCSS文件。如果它与ng2-wizard模块一起打包，只需在代码中执行以下操作：

import 'ng2-wizard/wizard.scss';

那就是它！ Webpack会将其提取并添加到您的捆绑包中。您不必在ng2-wizard模块的代码中的任何位置引用wizard.scss。