Menu
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.
598
Go to http://materializecss.com/getting-started.html to download the latest version available. Then, put the downloaded materialize. min. js file in a directory of your website, e.g. /js and materialize.
There are two ways to use MaterializeCSS, either you can download the files on your system or use the files from CDN (Content Delivery Network).
Materialize is by design very minimal and flat. It is designed considering the fact that it is much easier to add new CSS rules than to overwrite the existing CSS rules. It supports shadows and bold colors. The colors and shades remain uniform across various platforms and devices.
For the webpack.config.js file, we have some configurations written like so: In order to work with CSS Modules, we need to install style-loader and css-loader: We need the css-loader module to interpret @import and url() like import/require(), and resolve them, along with the style-loader module to inject our CSS into the DOM.
@ArdentKid it's same as including a local CSS file. You include npm modules with require ('some-module'), so if that module has a CSS file somewhere, you would do require ('some-module/path/to/style.css').
There are several ways of using Materialize CSS in ReactJS. However, I always use the following easiest one. Here you can use Materialize CSS classes just like your HTML site using only ClassName with tags. 1 ) Install Materialize CSS for ReactJS using NPM. 2 ) Then import the minified materialize CSS file to index.js file.
Let’s begin by setting up webpack. Our demo app has an src folder containing index.html, style.css, and index.js. Outside the src folder, we have our webpack.config.js, babel.config.js, package.json, and package-lock.json files. You can use the npm run build command to build the project and npm run dev to start the app in localhost 8080.
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'; 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'; If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
