Question

我使用webpack作为我的捆绑器/加载器，我可以在精细（js / css）中加载materialize css，但是当我尝试使用toast时，它说

Uncaught TypeError: Vel is not a function

我将库包含在主index.js文件中：

import 'materialize-css/bin/materialize.css' import 'materialize-css/bin/materialize.js'

有谁知道为什么会发生这种情况？查看捆绑的源代码，实现的js就在那里。

Answer 1

有同样的问题＆amp;提出了一些更简单的解决方案：只需要完成两件事：

首先：在您的根模块中导入以下内容，例如app.js

//given you have installed materialize-css with npm/yarn

import "materialize-css";
import 'materialize-css/js/toasts';

第二：如果是webpack，请设置以下插件或将velocity.min.js作为全局变量，就像使用jquery一样：

  new webpack.ProvidePlugin({
    "$": "jquery",
    "jQuery': "jquery",
    "Vel": "materialize-css/js/velocity.min.js"
  }),

Answer 2

我也试图在webpack中使用materialize-css并且也遇到了这个问题（尽管不是出于同样的原因）。 Materialise并不是真正构建模块加载器，而是使用全局变量。他们还以您在webpack-workflow中可能不需要的方式直接将依赖项捆绑到其脚本中。

我的设置与你完全不一样，但无论如何我会分享它，希望它会有所帮助，我的webpack + materialize在我创建的文件中就像这样工作;

/**
 * custom-materialize.js
 */

// a scss file where we include the parts I use.
require('./custom-materialize.scss');

/**
 * materialize script includes
 * we don't use all the plugins so no need to
 * include them in our package.
 */
require('materialize-css/js/initial');
require('materialize-css/js/jquery.easing.1.3');
require('materialize-css/js/animation');
// note: we take these from npm instead.
//require('materialize-css/js/velocity.min');
//require('materialize-css/js/hammer.min');
//require('materialize-css/js/jquery.hammer');
require('materialize-css/js/global');
//require('materialize-css/js/collapsible');
require('materialize-css/js/dropdown');

然后从npm npm install velocity-animate安装Velocity 并将全局Vel物化使用指向该包，而不是在webpack中。

  new webpack.ProvidePlugin({
    '$': 'jquery',
    'jQuery': 'jquery',
    'Vel': 'velocity-animate'
  }),

Answer 3

您必须在index.html中单独导入css和js文件你不能在index.js中导入css文件

Answer 4

确保uglifyJsPlugin是这样的。

 new webpack.optimize.UglifyJsPlugin({sourceMap: true, mangle: false})

mangle属性应为false，以便缩小时源文件的变量名称不会发生变化。

materialize-css Uncaught TypeError：Vel不是函数

4 个答案: