问题描述
也许是一个真正的菜鸟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()
这篇关于Webpack的Bootstrap材料设计的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!