Question

也许是一个真正的新手webpack问题，但我在这里：

想知道（因为我真的没有找到任何直接的答案），是否有人可以给我一个如何让bootstrap material design工作的提示？我得到了css的东西，但不是ripples.js的东西......

我的webpack设置，它的一点点：

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

在我的react的index.js中，这就是它开始的地方：

...
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工作？

我没有收到控制台错误或webpack错误，但是没有显示出错误的涟漪！我猜有一种智能的webpack方式可以让这一切全部运行，或者我是否需要在我的index.js中明确要求.js（这还没有用）？

提前感谢，

hanto899

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

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

我没有错误，但涟漪不起作用。但是......如果我导航到另一个页面，并在该页面上添加：

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

webpack热重新加载，然后我得到了涟漪效果。如果我刷新页面，我得到：

Uncaught TypeError: Cannot read property 'init' of undefined

...

Answer 1

最后，我得到了它的工作。

您可以按如下方式导入它们

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（）会将ripples.js应用于默认元素。

Answer 2

@MrJSingh和@Rob Kielty的上述答案对我不起作用。

所以，我做了一些必要的修改。希望这会有所帮助。

在您的入口点文件（即我项目中的index.js）中，按如下方式导入文件

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

然后致电

$.material.init();

查找我的网络包配置为here

使用Webpack进行Bootstrap材料设计

2 个答案: