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.
Add a comment
|
2 Answers
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';
4 Comments
Turan
thanks, this should be somewhere in the official documentation.
Mike Lippert
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
kolen
As I understand, this goes into
.js file, but what kind of import should be added to .css file?
kchak
@kolen you need to enable css-loader for this to work as shown. Both imports are for the js file.
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';
