angular2-redux-starter: Reference third party css modules e.g materialize

[WarTech9]

I am using the angular2-redux starter as the base of my project. Also using the materialize css theme loaded from a CDN, which works fine (mostly) but due to CDN error issues I want to load from the NPM modules provided.

Using the default webpack loaders, I should be able to load css, scss and fonts. This is not the case as Materialize references fonts which throw errors.

Trying to import the main materialize.scss file in app.component.ts, using: import 'materialize-css/bin/materialize.sss'; I get the following error: ERROR in ./~/materialize-css/sass/materialize.scss Module parse failed: .../node_modules/materialize-css/sass/materialize.scss Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected character '@' (1:0) at Parser.pp$4.raise (.../node_modules/acorn/dist/acorn.js:2221:15) at Parser.pp$7.getTokenFromCode (.../node_modules/acorn/dist/acorn.js:2756:10) at Parser.pp$7.readToken (.../node_modules/acorn/dist/acorn.js:2477:17) at Parser.pp$7.nextToken (.../node_modules/acorn/dist/acorn.js:2468:15) at Parser.parse (.../node_modules/acorn/dist/acorn.js:515:10) at Object.parse (.../node_modules/acorn/dist/acorn.js:3098:39) at Parser.parse (.../node_modules/webpack/lib/Parser.js:902:15) at DependenciesBlock.<anonymous> (.../node_modules/webpack/lib/NormalModule.js:104:16) at DependenciesBlock.onModuleBuild (.../node_modules/webpack-core/lib/NormalModuleMixin.js:310:10) at nextLoader (.../node_modules/webpack-core/lib/NormalModuleMixin.js:275:25) at .../node_modules/webpack-core/lib/NormalModuleMixin.js:259:5 at Storage.finished (.../node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16) at .../node_modules/graceful-fs/graceful-fs.js:78:16 at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:439:3) @ ./src/app/components/app.component.ts 19:0-48 Child html-webpack-plugin for "index.html":

Alternatively, I try loading the scss file as part of the styles array in app.component.ts: styles: [require('materialize-css/bin/materialize.css').toString(), require('../../assets/scss/main.scss').toString()],

And get similar errors. Note, the second item in that array main.scss gets loaded correctly as its within my src folder.

I've tried other options too (too many to list here) and get variations of the above error or it loads the css/scss files but then complains about invalid characters in font files loaded from css. So basically, what is the correct way to do this?