Reactjs 用Webpack进行Bootstrap材料设计

也许这是一个真正的新手网页问题，但我想：

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

我的网页设置，以及其中的一些：

  ...
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正常工作

我没有控制台错误或网页错误，但该死的涟漪没有显示！我猜有一个聪明的网页包可以让这一切运行起来，还是我需要在index.js中显式地要求.js（这还不起作用）

提前感谢,

汉图899

更新： 如果我在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()

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

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

webpack热重新加载，然后我让ripple工作。然而，如果我刷新页面，我会得到：

Uncaught TypeError: Cannot read property 'init' of undefined

---

终于，我让它工作了

您只需按如下方式导入它们

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

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

$.material.ripples（）将对默认元素应用ripples.js

上面的答案是我的，对我不起作用

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

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

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

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

---

查找我的网页包配置是

你可以通过网页包在你的应用程序中获取它们。你解决了吗？我已经解决了并更新了我的答案请看一看并尝试！我假设它在index.js文件中？那么，我应该显式地使用这些变量，还是因为bundeling将对这两个变量的依赖关系进行排序，所以它会起作用呢。webpack为每个所需的文件提供一个唯一的id，这样它就不会被混合起来。嗯，仍然没有涟漪，我正在尝试一个：Heyif webpack无法找到涟漪，它的文件给你捆绑上的错误，你有错误吗？我需要以其他方式初始化吗？