从 npm 包中导出 SCSS 文件

Question

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

• 现在我想将这个 SCSS 样式包含在我的 angular 组件中，例如 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 包中的 SCSS 文件 export 发送到我的应用程序，但是如何？

---

编辑：

我尝试更深入地研究它。

添加后：

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

Answer 1

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

import 'ng2-wizard/wizard.scss';

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