3

私は流星でマテリアライズを使用しています。meteor add materialize:materializeインストールにはコマンドを使用しています。これは機能しますが、cssファイルにコンパイルする前にsassファイルを編集できるようにしたいと思います(原色などを変更できるようにするため)。これを達成するためにこれまでに行ったこと: 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

main.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

meteor で sass ソース ファイルを使用すると、同様の問題が発生します。

sokkiが送信したリンクには、アイコンの問題を解決するのに役立つコード行が含まれています https://github.com/Dogfalo/materialize/issues/1018

問題を解決するには 2 つの部分があります。

  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 を作成します。

（私はSOで書くのが初めてなので、編集の問題を許してください。）

于 2015-06-10T08:41:37.020 に答える