SassPlugin not working with Angular app with Fusebox

Question

I'm using fusebox in an Angular App and I use scss files instead of regular css.

My plugins are configured like this:

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

Ng2TemplatePlugin is used to be able to transform stylesUrl and templateUrl to regular style and template with require.

Now, one of the scss I use is importing some other scss file.

@import '../styles/globals';

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

When I check my bundled app.js I see this:

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

@import '../styles/globals';

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

As far as I know, fusebox should have imported ../styles/globals and appended here instead of the @import, but it didn´t, and I get an error now when loading my app.

I thought SassPlugin was supposed to do exactly that.

Thanks

score 1 · Answer 1 · answered Jun 19 '17 at 08:01

Ok, I manage to make this work, so here it goes in case it helps someone:

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

So, I use RawPlugin to require the scss as a String in my components, and then SassPlugin and CSSPlugin will take care of it.

Also, HTMLPlugin to deal with templates.

SassPlugin not working with Angular app with Fusebox

1 Answers1