How to include materialize-css npm package with webpack

Question

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.

score 40 · Accepted Answer · edited May 18 '20 at 09:45

40

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';

edited May 18 '20 at 09:45

orimdominic

995
10
23

answered Dec 23 '15 at 12:39

neurodynamic

4,294
3
28
39

1

thanks, this should be somewhere in the official documentation. – Thibault Fouquaert Jun 12 '17 at 19:04
1

I changed this somewhat to import `materialize-css/dist/js/materialize.js` and `materialize-css/dist/css/materialize.css` since the package main pointed at /dist/js – Mike Lippert Jun 06 '18 at 18:22
As I understand, this goes into `.js` file, but what kind of import should be added to `.css` file? – kolen Jun 22 '20 at 14:59
@kolen you need to enable css-loader for this to work as shown. Both imports are for the js file. – kchak Jul 28 '20 at 09:46

score 10 · Answer 2 · edited May 19 '20 at 09:58

10

In my case I'm using create-react-app, and I was able to execute:

yarn add materialize-css

And then in my index.js (top level react file):

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

edited May 19 '20 at 09:58

orimdominic

995
10
23

answered Dec 15 '17 at 15:09

brittohalloran

3,534
4
28
27

How to include materialize-css npm package with webpack

2 Answers2

Linked