如何在nodejs中使用MaterializeCSS?

问题描述 投票:0回答:7

我运行了以下命令:

npm install materialize-css --save
npm install hammerjs --save
npm install jquery --save

然后在我的

app.js
var materialize = require('materialize-css');

但是当我运行

npm start
时我总会遇到同样的错误:

/Users/myname/code/websites/n-website/node_modules/materialize-css/bin/materialize.js:1
eof require?$=require("jquery"):$}jQuery.easing.jswing=jQuery.easing.swing,jQu
                                                                    ^
TypeError: Cannot read property 'swing' of undefined
    at Object.<anonymous> (/Users/nyname/code/websites/n-website/node_modules/materialize-css/bin/materialize.js:1:195)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/myname/code/websites/n-website/app.js:9:19)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)

我找不到其他人遇到这些问题,所以这一定是我尝试使用 MaterializeCSS 的方式。我究竟做错了什么?我只是希望能够使用

materialize.toast("Message sent", 5000);
显示失败 toast。没什么花哨的。

node.js materialize
7个回答
0
投票

Materializecss 是一个用于 gui/网站的前端框架,而不是用于服务器端 js 应用程序的


0
投票

您是否也明确需要 jQuery?也在materialize-css之前?


0
投票

我在

node_modules/jquery/README
文件中发现以下内容:

节点

要将 jQuery 包含在 Node 中,请首先使用 npm 安装。

npm install jquery

要使 jQuery 在 Node 中工作,需要一个包含文档的窗口。由于 Node 中原生不存在这样的窗口,因此可以通过 jsdom 等工具来模拟。这对于测试目的很有用。

require("jsdom").env("", function(err, window) {
      if (err) {
          console.error(err);
          return;
      }
      var $ = require("jquery")(window);
  });

希望对您有帮助。


0
投票

Materializecss 是 gui/网站的前端框架,而不是服务器端 js 应用程序的前端框架。您无法在服务器端 Node.js 上编写 Materialise 内容。您必须将具体化 css 文件和具体化 js 文件链接到您要具体化的 html 文件上。您可以从下面的链接下载物化 css 和 js 文件。

开始使用materialize-css可能对您有用。 教程点环境设置可以供您参考。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
  <head>
    <title>Sample materialization</title>
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <!--materialize.css from my website directory stylesheets/-->
    <link type="text/css" rel="stylesheet" href="stylesheets/materialize.css"  media="screen,projection"/>
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>
  
  
  <body>

    <!--Import jQuery before materialize.js-->
    <!--Import materialize.js from my website directory materialization-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="materialization/materialize.js"></script>
  
    <!--simple materialized division-->
    <div class="card-panel teal lighten-2">This is a card panel with a teal lighten-2 class</div>
    
  </body>
</html>


0
投票

如果您使用handlebars,通常可以通过位于layouts文件夹中的main.handlebars文件中的标签来调用Materialize.css,只需在app.js中设置静态文件调用即可。

在 app.js 中:

app.use (express.static ('public'))

在 main.handlebars 中:

link rel = "stylesheet" href = "css / materialize.min.css"

配置完成后,静态文件夹,href 获取以下路径 public/css/materialize.min.css

这是 Node.js 中带有 Materialize 的项目链接:

rmidia.herokuapp.com


0
投票

使用 Vanilla Javascript 启动 Materialize 组件而不是使用 jquery,它会起作用。


0
投票

有点晚了。但您可以使用 CDN。入门指南现在有相关说明。 https://materializecss.com/getting-started.html

© www.soinside.com 2019 - 2024. All rights reserved.