如何在nodejs中使用物化CSS？

hpcdzsge 于 2023-02-03 发布在 Node.js

关注(0)|答案(7)|浏览(105)

我运行了以下命令：

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

然后在我的app.js中
但是当我运行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)

我找不到其他人有这些问题，所以这一定是我尝试使用物化CSS的方式。我做错了什么？我只是想能够使用materialize.toast("Message sent", 5000);显示失败的吐司。没有什么花哨的。

node.js

来源：https://stackoverflow.com/questions/37823496/how-to-use-materializecss-in-nodejs

7条答案

按热度按时间

omjgkv6w1#

Materializecss是gui / website的前端框架，而不是服务器端js应用程序的前端框架

赞(0）回复(0）举报 2023-02-03

jmo0nnb32#

你也明确要求jQuery吗？在实现css之前也是如此吗？

赞(0）回复(0）举报 2023-02-03

monwx1rj3#

我在node_modules/jquery/README文件中找到以下内容：

节点

要在Node中包含jQuery，首先使用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）回复(0）举报 2023-02-03

vdgimpew4#

Materializecss是一个用于gui / website的前端框架，而不是用于您的服务器端js应用程序。您不能在服务器端node.js上编写您的Materialize内容。您必须在要物化的html文件上链接物化css文件和物化js文件。您可以从下面的链接下载物化css和js文件。
Get started with materialize-css可能对您的参考有用。Tutorialspoint environment setup can be useful for your reference.

<!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）回复(0）举报 2023-02-03

4smxwvx55#

如果您使用handlebar，通常可以通过layouts文件夹中main.handlebars文件中的标记调用Materialize.css，只需在app.js中设置静态文件调用。
在应用程序js：app.use (express.static ('public'))中
主把手：link rel = "stylesheet" href = "css / materialize.min.css"
配置后，静态文件夹href将获得以下路径public/css/materialize.min.css
下面是node.js中带有materialize的项目链接：
rmidia.herokuapp.com

赞(0）回复(0）举报 2023-02-03

z31licg06#

初始化物化组件使用香草Javascript而不是使用jquery，它会工作。

赞(0）回复(0）举报 2023-02-03

70gysomp7#

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

赞(0）回复(0）举报 2023-02-03