如何为使用SASS并共享常见SASS导入的angular2组件设置webpack？

Question

我正在使用Angular2，它基本上允许我使用sass文件作为与我的组件绑定的样式。所以我有许多单独的sass文件，因为它们是每个组件。

我为此设置了webpack，没问题。我可以使用SASS，加载器可以处理它，所有东西都被捆绑和缩小。

以下是问题所在：

在我的特定示例中，我使用的是materializecss库（而不是bootstrap3，一次）。

为了让我对断点，颜色和其他内容使用materialize变量，我需要包含materializecss.scss文件。

这迫使我@import我的每个component.scss文件顶部的巨型scss文件，否则webpack会向我抛出错误，它不理解变量。但是当我这样做时，我知道一个事实，webpack每次都复制这个巨型库，但我真的希望它只做一次。

这是sass的常见问题，通过创建一个负责按顺序加载所有内容的“主”文件可以轻松解决这个问题。但是，我们以这种方式为angular2使用组件样式这一事实阻止了我能够以这种方式解决它。

如果我可以首先将webpack配置为BUNDLE内存中的SCSS文件，那么这将是最佳选择，然后才能在其上运行SASS加载程序。这样，我只需要包括一次materializecss.scss。可能吗？现在，在幕后，似乎webpack立即对每个文件进行sass-＆gt; css转换，这是有问题的。

以下是一些简单的例子：

Component1.scss

// component1.scss

// next line is for visual studio intellisense
///<reference path="../../../node_modules/materialize-css/sass/materialize.scss" />

// I'm being forced to import the next line because webpack wont understand the media query.
@import "~materialize-css/sass/materialize.scss"; // Importing this too many times

@media #{$medium-and-down} {
    div {
        color: red;
    }
}

Component2.scss

// component2.scss

// next line is for visual studio intellisense
///<reference path="../../../node_modules/materialize-css/sass/materialize.scss" />

// I'm being forced to import the next line because webpack wont understand the media query.
@import "~materialize-css/sass/materialize.scss"; // Importing this too many times

@media #{$medium-and-down} {
    span {
        color: blue;
    }
}