使用 Webpack 引导材料设计答案

【问题标题】：Bootstrap Material Design with Webpack使用 Webpack 引导材料设计
【发布时间】：2016-08-05 19:56:44
【问题描述】：

也许是一个非常菜鸟的 webpack 问题，但我来了：

想知道（因为我真的没有找到任何直接的答案）是否有人可以给我一个关于如何让bootstrap material design 工作的提示？我得到了 css 的东西，但没有涟漪.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 和ipples.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

....

【问题讨论】：

你可以通过 webpack 在你的应用中获取它们。
你解决了吗？
我已经解决并更新了我的答案请看here is my testes repo试试吧！

标签： reactjs twitter-bootstrap-3 webpack material-design redux

【解决方案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 应用于默认元素。

【讨论】：

我假设这是在 index.js 文件中？然后呢，我是明确使用这些，还是因为捆绑会整理出这两个变量的依赖关系，所以它是否有效？
捆绑会解决。 webpack 为每个需要的文件提供一个唯一的 id，这样它就不会混淆
嗯，仍然没有涟漪，我正在尝试：
如果 webpack 无法找到 Ripple 它的文件给你打包时出错，你会得到错误吗？
我需要以其他方式初始化材料吗？

【解决方案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();

发现我的webpack配置是here

【讨论】：