Materialize: Problem with using materialize-css as npm package

Created on 21 Feb 2017 · 4Comments · Source: Dogfalo/materialize

How can I properly use materialize-css after installing it with npm i materialize-css --save?

I have no found any guide about this, what files should be imported, absolutely nothing about those helpful things.

Maybe such important things should be documented as well.

Source

YuriiNskyi

👍4

Most helpful comment

That's the problem, with using materilize-css with webpack. Because you need special loaders for css, for fonts, it's quite delicate thing how to configure and connect these things. Special section in documentation would be really helpful.

YuriiNskyi on 22 Feb 2017

👍4

All 4 comments

I have no found any guide about this, what files should be imported, absolutely nothing about those helpful things.

Installation and usage of materialize isn't too much different from doing the same with other frameworks.

The easiest (and i would say the dirtiest) way is to reference js/css files directly from _node_modules_ folder. For example:

<html>
<head>
    <title>Demo</title>

    <link rel="stylesheet" type="text/css" href="../node_modules/materialize-css/dist/css/materialize.min.css"  />

    <script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="../node_modules/materialize-css/dist/js/materialize.min.js"></script>

    <style>
        .offset{
            padding: 20px;
        }
    </style>
</head>
<body>
<div class="offset">
    <p>Click on the button:</p>
    <a class="btn waves-effect waves-light" onclick="Materialize.toast('Hello world!', 4000)">Toast!</a>
</div>
</body>
</html>

But this involves some unnecessary movements, so i would advise to go on more complicated topics like the usage of build tools, e.g. webpack.