How to include materialize-css npm package with webpack

css npm webpack materialize webpack-style-loader
neurodynamic picture neurodynamic · Dec 23, 2015 · Viewed 16.4k times · Source

I'm writing a client-side app that is using Webpack, and I cannot figure out how to require the materialize-css package. I'm using Henrik Joreteg's hjs-webpack package, and with this the yeticss npm package is included by doing an import in a sass file (e.g. @import 'yeticss'), but this doesn't work for materialize. Requiring it straight up in the code (e.g. import 'materialize-css' in a JS file) like any other package also doesn't work.

Answer

neurodynamic picture neurodynamic · Dec 23, 2015

In this case, unlike with yeticss, you need to go in and require the specific files, rather than just the package name, thus:

import 'materialize-css/dist/css/materialize.min.css';
import 'materialize-css/dist/js/materialize.min';

Related questions

With Webpack, is it possible to generate CSS only, excluding the output.js?

I'm using Webpack with the extract-text-webpack-plugin. In my project, I have some build scripts. One of the build scripts is supposed to bundle and minify CSS only. As I'm using Webpack for the other scripts, I found it a good …

Read More
How to use font-awesome icons from node-modules

I have installed font-awesome 4.0.3 icons using npm install. If I need to use it from node-modules how should I use it in html file? If I need to edit the less file do I need to edit it in node-modules?

Read More
How to compile scss to css with node-sass

I have a master.scss with many imports from other .scss files. If I change a * .scss file master.css is generated automatically. I use only the NPM, no Gulp or Grunt! This should remain so. My current build script: "…

Read More