CODEWITHSUNDEEP
reactjstwitter-bootstrap-3webpackmaterial-designredux
hanto899
hanto899

Reputation: 103

Bootstrap Material Design with Webpack

perhaps a really rookie webpack question, but here i go:

Was wondering (since i really havent found any direct answers) if anyone could give me a hint on how to get bootstrap material design working? I get the css stuff going for me but not the ripples.js stuff...

my webpack setup, well bits of it:

  ...
plugins: [ new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" }) ],
module: {
loaders: [
       { test: /\.js?$/, exclude: /(node_modules|bower_components)/, loader: 'babel' },
       { test: /\.css$/, loader: 'style-loader!css-loader' },
       { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
       { test: /\.(woff|woff2)$/, loader:"url?prefix=font/&limit=5000" },
       { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
       { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" }
]
}
...

in my react's index.js which is where it all starts:

...
import Bootstrap from 'bootstrap/dist/css/bootstrap.css'
require('bootstrap-material-design/dist/css/bootstrap-material-design.css')
require('bootstrap-material-design/dist/css/ripples.min.css')
...

how would i get the material.js and ripples.js to work?

i get no console errors or webpack errors, but the darn ripples are not showing! i am guessing there is a smart webpack way to get this all running or do i need to require the .js explicitly in my index.js (that has not worked)?

thanks in advance,

hanto899

UPDATE: if i require the following in my index.js file:

 require('bootstrap/dist/css/bootstrap.css')
require('bootstrap-material-design/dist/css/bootstrap-material-design.min.css')
require('bootstrap-material-design/dist/css/ripples.min.css') 

require('bootstrap')
var material = require('bootstrap-material-design/dist/js/material.js') // not sure if the "var material =" is necessary here...
var ripples = require('bootstrap-material-design/dist/js/ripples.js') // not sure if the "var material =" is necessary here...

let $ = require('jquery')
$.material.init()

i get no errors, but ripple doesnt work. but... if i navigate to another page, and add, while on that page, :

let $ = require('jquery')
$.material.init()

webpack hot-reloads and then i get the ripple working. howerver if i refresh the page, i get:

Uncaught TypeError: Cannot read property 'init' of undefined

....

Upvotes: 1

Views: 2500

Answers (2)

M. Nunisa
M. Nunisa

Reputation: 91

Above answer by @MrJSingh and @Rob Kielty was not working for me.

So, I did some necessary modifications. Hope this will help.

In your entry point file (i.e. index.js in my project), import the files as follows

import '!style-loader!css-loader!bootstrap/dist/css/bootstrap.min.css';
import '!style-loader!css-loader!bootstrap-material-design/dist/css/bootstrap-material-design.min.css';
import '!style-loader!css-loader!bootstrap-material-design/dist/css/ripples.min.css';
import 'bootstrap-material-design/dist/js/material.min.js';
import 'bootstrap-material-design/dist/js/ripples.min.js';

Then call

$.material.init();

Find my webpack configuration is here

Upvotes: 0

Jorawar Singh
Jorawar Singh

Reputation: 7621

Finally, I got it working.

You can simply import them as follows

import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-material-design-master/dist/css/bootstrap-material-design.css";
import "bootstrap-material-design/dist/css/ripples.css";
import "bootstrap-material-design-master/dist/js/material.js";
import 'bootstrap-material-design-master/dist/js/ripples.js';

Then you need to call

$.material.ripples()

$.material.ripples() will apply ripples.js to the default elements.

Upvotes: 3

Related Questions