css未捕获类型错误:Vel不是函数

I'm using webpack as my bundler/loader and I can load materialize css in fine (js/css), but when I try to use the toast, it says

我使用webpack作为我的bundler/loader，我可以很好地加载materialize css (js/css)，但是当我尝试使用toast时，它说

Uncaught TypeError: Vel is not a function

未捕获的类型错误:Vel不是函数

I am including the library in the main index.js file by:

我把图书馆包括在主要索引中。js文件:

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

进口的materialize-css / bin /实现。css“进口”materialize-css / bin / materialize.js”

Does anyone know why this could be happening? Looking at the bundled source, the js for materialize is there.

有人知道为什么会发生这种事吗?看一下绑定的源代码，实现的js就在那里。

4 个解决方案

#1

Had a same problem & came up with somewhat simpler solution: Only 2 things are needed to be done:

遇到了同样的问题，并想出了更简单的解决方案:只需要做两件事:

First: Import following in you root module like app.js

首先:导入根模块中的follow，如app.js

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

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

Second: if webpack, set following Plugin or get the velocity.min.js as global variable just like you would use jquery:

第二:如果是webpack，设置插件或获取velocite .min。js作为全局变量，就像jquery一样:

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

#2

I'm also trying to use materialize-css with webpack and have also run into this issue (albeit not for the same reason). Materialize isn't really built with a module loader in mind, and use global variables. They also bundle dependencies into their script directly in a way you might not want in a webpack-workflow.

我还试图在webpack中使用materialize-css，并遇到了这个问题(尽管不是出于同样的原因)。Materialize并不是在脑海中构建模块装入器，而是使用全局变量。它们还将依赖项直接打包到脚本中，您可能不希望在web包工作流中使用这种方式。

I have a setup not exactly the same as you but I'll share it anyways, hoping it will help, my webpack+materialize works like this in a file i've created;

我有一个和你不完全一样的设置但是我将以任何方式分享它，希望它会有所帮助，我的webpack+物化工作像这样在我创建的文件中;

/**
 * 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');

Then just install Velocity from npm npm install velocity-animate and point the global Vel materialize use to that package instead in webpack.

然后从npm npm安装Velocity安装速度动画，并在webpack中将全局的Vel物化使用指向该包。

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

#3

you have to import css and js Files separately in your index.html you must not import css file in index.js

必须在索引中分别导入css和js文件。您不能在index.js中导入css文件

#4

Make sure that the uglifyJsPlugin is like this.

确保uglifyJsPlugin是这样的。

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

mangle property should be false so that the variable names of your source file doesn't change when you minify.

mangle属性应该是false，这样当您缩小时源文件的变量名不会改变。

#1