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;
}

当我检查捆绑的app.js时，我看到了这一点：

___scope___.file("app/app.component.scss", function(exports, require, module, __filename, __dirname){

@import '../styles/globals';

.app {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
});

据我所知，fusebox应该导入../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作为String，然后SassPlugin和CSSPlugin将负责它。

另外，HTMLPlugin处理模板。

SassPlugin没有使用带有Fusebox的角色应用

1 个答案: