Materialize Module Build Failed: Invalid CSS / Expected Selector

Question

I'm using Sage framework to build a WordPress site and would like to use a custom CSS framework, which is Materialize CSS. Sage uses Webpack to build the CSS.

Upon building, I get the following error message:

WAIT  Compiling...                                                                                                                                                                                                     1:55:57 PM


ERROR  Failed to compile with 1 errors                                                                                                                                                                                 1:55:57 PM
error  in ./resources/assets/styles/main.scss

Module build failed:
    .#{$color_name}.#{$color_type} {
    ^
    Invalid CSS after ".white": expected selector, was ".#0a0a0a"
    in /mnt/c/Users/Kenny/Local Sites/ngcsaget1/app/public/wp-content/themes/ngc11/node_modules/materialize-css/sass/components/_color-classes.scss (line 14, column 7)

@ ./resources/assets/styles/main.scss 2:14-358 21:1-42:3 22:19-363
@ multi ./resources/assets/build/util/../helpers/hmr-client.js ./scripts/main.js ./styles/main.scss

Here's the Materialize Github repo: https://github.com/Dogfalo/materialize

If needed, here's the github for the Sage framework, the webpack.config.js is in the build folder: https://github.com/roots/sage/tree/master/resources/assets

---

note:

I get the error when I try to import the .scss file:

@import "~materialize-css/sass/materialize";

If I import the full .css file, I get access to the framework, but it's plain ol' css:

@import "~materialize-css/dist/css/materialize";

---

Here's the webpack code: https://github.com/roots/sage/blob/master/resources/assets/build/webpack.config.js