SassPlugin 不适用于带有 Fusebox 的 Angular 应用程序

Question

我在Angular App中使用fusebox，我使用scss文件而不是常规css。

我的插件配置如下：

plugins: [
[SassPlugin(), CSSPlugin()],
CSSPlugin(),
Ng2TemplatePlugin()
]

Ng2TemplatePlugin 用于能够将 stylesUrl 和 templateUrl 转换为具有 require 的常规样式和模板。

现在，我使用的 scss 之一是导入其他一些 scss 文件。

@import '../styles/globals';
.app {
height: 100vh;
display: flex;
flex-direction: column;
}

当我检查捆绑的应用程序时.js我看到以下内容：

___scope___.file("app/app.component.scss", function(exports, require, module, __filename, __dirname){
@import '../styles/globals';
.app {
height: 100vh;
display: flex;
flex-direction: column;
}
});

据我所知，保险丝盒应该已经进口了../styles/globals 并附加到此处而不是@import，但它没有，我现在在加载应用程序时收到错误。

我认为SassPlugin应该这样做。

谢谢

Answer 1

好的，我设法完成了这项工作，所以如果它对某人有帮助，它就在这里：

plugins: [
Ng2TemplatePlugin(),
['*.component.scss', RawPlugin()],
HTMLPlugin({
useDefault: false
}),
[SassPlugin(), CSSPlugin()],
CSSPlugin(),
WebIndexPlugin({
path: '.',
template: 'src/index.html'
})
]

因此，我使用 RawPlugin 要求 scss 作为我的组件中的字符串，然后 SassPlugin 和 CSSPlugin 将处理它。

此外，HTMLPlugin 来处理模板。