Webpack的Bootstrap材料设计 [英] Bootstrap Material Design with Webpack

问题描述

也许是一个真正的菜鸟webpack问题，但是我去了:

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

想知道(因为我真的还没有找到任何直接的答案)是否有人可以给我提示如何获取引导材料设计有效吗?我得到了适合我的CSS东西，但没有涟漪.js的东西...

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...

我的webpack设置，其中包括:

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" }
]
}
...

在我的反应的index.js中，这就是所有开始的地方:

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')
...

我将如何使material.js和ripples.js工作?

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

我没有收到任何控制台错误或Webpack错误，但该死的涟漪没有显示出来！我猜想有一种智能的webpack方式可以使这些全部运行，还是我需要在我的index.js中显式地要求.js(这没有用)?

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)?

预先感谢，

hanto899

更新: 如果我在index.js文件中需要以下内容:

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热重载，然后我开始工作了.但是，如果我刷新页面，则会得到:

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

....

推荐答案

最后，我开始使用它了.

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

然后您需要致电

$.material.ripples() 

$.material.ripples()会将涟漪图.js应用于默认元素.

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

这篇关于Webpack的Bootstrap材料设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！