CSS @import “~materlize-css” | Using Webpack | No style being made

Question

I'm using Sage, a WordPress framework, and it lets you choose during creation some css frameworks, but I want to use Materialize CSS instead.

It uses Webpack to build and combine the .scss files into one. I did an npm install materialize-css so it's in my node_modules . In my project structure, I made an scss file that's used to import the module basically.

I also have bulma in this build, included via the original creation, so I can try to see how the structure is setup. It uses the following import statement:

@import "~bulma";

This works. I'm so confused about how this works. I think the ~ (tilde) tells Webpack something, but I don't know what. What I figured is that Webpacks checks the package.json file or something and finds it in the node_modules.

I've tried @import "~materialize-css"; with no luck.

Can someone explain what the heck Webpack is doing? Haha, because I can't find any documentation on this.

Here are the node_module folder structures, maybe this has something to do with it:

Perhaps the root of Bulma is bulma.sass yet for Materialize-CSS, there's no file, it's in sass/materialize.scss .

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

Answer 1

You have to specific the file you want to import also like this

@import "~bootstrap/scss/bootstrap";
@import "~font-awesome/scss/font-awesome";
@import "~toastr/toastr";