3

我正在使用物化流星。我一直在使用meteor add materialize:materialize命令进行安装。这可行，但我希望能够在 sass 文件编译成 css 文件之前对其进行编辑（这样我就可以更改诸如原色之类的东西）。到目前为止我为实现这一目标所做的工作：从http://materializecss.com/getting-started.html#download下载了 sass 源文件并将它们复制到客户端文件夹中。我还添加了一个 scss 编译器meteor add fourseven:scss。即使在一个新的流星项目上这一切都是正确的，我想知道我是否缺少实现工作的关键包？我相信我可能只是缺少某些功能的包或库。

使用下面提到的设置后到目前为止遇到的问题：（可能会有更多问题）

问题 1：波浪效果不会消失 - 单击按钮后，波浪会出现，但之后不会清除透明效果。

问题 2：表单提交时元素消失 - 提交表单后，表单输入字段消失，页面上的其他按钮消失。

问题 3：无法使用具体化图标 - 当使用来自具体化的图标时，它不会显示或使用不同的图标。如果您想知道图标应该是什么样子，请在此处查看：http: //materializecss.com/icons.html

设置：

$ meteor create test
$ cd test
$ rm test.html test.css test.js
$ meteor add fourseven:scss
$ mkdir client

copied materialize-src into test/client/
created client/main.html

主.html：

<head>
  <title>Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>

<body>

  <nav class="blue darken-3">
    <div class="nav-wrapper">
      <a href="#" class="brand-logo center">
        Logo
      </a>

      <!-- EXAMPLE ICONS (in navbar) -->
      <ul class="right">
        <li><a href="#" class="tooltipped" data-position="bottom" data-delay="1000" data-tooltip="Map"><i class="mdi-social-public"></i></a></li>
        <li><a href="#" class="tooltipped" data-position="bottom" data-delay="1000" data-tooltip="List"><i class="mdi-action-view-list"></i></a></li>
        <li><a href="#" class="tooltipped" data-position="left" data-delay="1000" data-tooltip="Logout"><i class="mdi-content-clear"></i></a></li>
      </ul>
    </div>
  </nav>

  <!-- EXAMPLE FORM -->
  <form>
    <div class="row">
      <div class="input-field">
        <input id="email" type="email">
        <label for="email">Email</label>
      </div>
    </div>
    <div class="row">
      <div class="input-field">
        <input id="password" type="password">
        <label for="password">Password</label>
      </div>
    </div>
    <div class="row">
      <button class="btn-large col s12 blue darken-3 waves-effect waves-light" type="submit" name="">Log In</button>
    </div>
  </form>
  <div class="row center-align">
    <a class="btn-flat waves-effect waves-teal">Create Account</a>
  </div>
  <div class="row center-align">
    <a class="btn-flat waves-effect waves-teal">Forgot Password</a>
  </div>
</body>

感谢您的任何帮助！

4

2 回答 2

3

我在使用带有流星的 sass 源文件时遇到了类似的问题。

sokki发送的链接有一行代码帮助我解决了图标问题 https://github.com/Dogfalo/materialize/issues/1018

解决问题有两个部分。

  1. 在您的 client/sass/components/_icons-material-design.scss 文件中，您需要替换

    @each $mdi-icon-name, $mdi-icon-value in $mdi-list-icons {
.#{$mdi-prefix}#{$mdi-icon-name}:before {
  content: unicode($mdi-icon-value);
 }
}

    和

    @each $mdi-icon-name, $mdi-icon-value in $mdi-list-icons {
  .#{$mdi-prefix}#{$mdi-icon-name}:before {
  content: "\"" + $mdi-icon-value + "\"";
 }
}

    这应该在您的图标应该存在但图像不存在的位置添加块。

  2. 将 /font 文件夹移动到 /public 文件夹，以便拥有 /public/font/material-design-icons 和 /public/font/roboto

（我是新手，所以请原谅任何编辑问题。）

于 2015-06-10T08:41:37.020 回答
1

您可以加入 github 上的相关问题：https ://github.com/Dogfalo/materialize/issues/1018

于 2015-04-29T18:40:59.607 回答