Sageのテーマにマテリアライズバウワーパッケージを追加する手順は？

Question

私はMaterializeをこのmodified sage wordpress themeに追加しようとしています。それはスタイラスとlostgridを加えたブートストラップを削除したsageです。 [そのリンクは、Materializeを追加しようとしていることを実現せずにRepoです。]

これらの変更はまだ追加されていますが、materializecssとjsは利用できないようです。

"dependencies": { 
    "materialize": "^0.97.7" 
    }, 
    "overrides": { 
    "materialize": { 
     "main": [ 
     "./css/materialize.css", 
     "./js/materialize.js" 
     ] 
    } 
    } 

commit hereが表示されます。 [これはbower.jsonにマテリアライズされたレポです。]

セイジのテーマにバウアーパッケージを追加するには何が必要ですか、何が間違っていますか？

このpage/commentによれば、私はbower.jsonで行ったことだけが必要です。

Answer 1

あなたのリンク先のbower.jsonにBowerライブラリが追加されていないので、手順1であなたのテーマディレクトリと$ bower install materialize --saveを入力してください。私は（私も無事にブートストラップのSCSS変数の任意の残骸を取り除くためにwiredepブロック後来るmain.scss内のすべての@importディレクティブをコメント）バウアーは、パッケージ化しを上書きし、すべてを削除した後、新鮮なセージのインストールでこれを行っていることに注意してください。あなたが私の答えの最後にスキップし、私のbower.jsonファイルをあなた自身のものとして使うのであれば、テーマのディレクトリを入力して$ bower installを実行するだけです。バウアー経由でマテリアライズをインストールした後、あなたがgulpを実行して、マテリアライズの証拠を見ることができるはず

が、私たちが解決する必要がありますいくつかの問題があります。

1. The main property of the Materialize projectポイントは、CSSファイルと縮小さJSへこれらの両方は理想的ではないので、それらを無効にします。

2. 上記の最初の問題は、gulpを実行した後でサイトを読み込んだときにも、フォントを上書きする必要があるためコンソール404が表示されることを意味します。

これは私がなってしまった最終bower.jsonファイルです：

{ 
    "name": "sage", 
    "homepage": "https://roots.io/sage/", 
    "authors": [ 
    "Ben Word <ben@benword.com>" 
    ], 
    "license": "MIT", 
    "private": true, 
    "dependencies": { 
    "materialize": "^0.97.7" 
    }, 
    "overrides": { 
    "materialize": { 
     "main": [ 
     "./dist/js/materialize.js", 
     "./sass/materialize.scss", 
     "./fonts/**/*" 
     ] 
    } 
    } 
} 

あなたはまた、あなたのmain.scssファイル前wiredepブロックにこれを追加する必要があります。

$roboto-font-path: "../fonts/";

オーバーライドを改善して、個々のSCSSコンポーネントのみを使用することができますdのすべてではなく、 JSソースも同じです（JSファイルは確実に特定の順序で組み込む必要がありますが、その多くはありますが、どのような順序でリストを表示する必要はありません）。

EDIT

あなたが個別にJSファイルを含める場合、私はあなたが何かを削除し、徹底的にテストした場合にだけ依存関係の用心、順序を考え出しました。

{ 
    "name": "sage", 
    "homepage": "https://roots.io/sage/", 
    "authors": [ 
    "Ben Word <ben@benword.com>" 
    ], 
    "license": "MIT", 
    "private": true, 
    "dependencies": { 
    "materialize": "^0.97.7" 
    }, 
    "overrides": { 
    "materialize": { 
     "main": [ 
     "./js/initial.js", 
     "./js/jquery.easing.1.3.js", 
     "./js/animation.js", 
     "./js/velocity.min.js", 
     "./js/hammer.min.js", 
     "./js/jquery.hammer.js", 
     "./js/global.js", 
     "./js/collapsible.js", 
     "./js/dropdown.js", 
     "./js/leanModal.js", 
     "./js/materialbox.js", 
     "./js/parallax.js", 
     "./js/tabs.js", 
     "./js/tooltip.js", 
     "./js/waves.js", 
     "./js/toasts.js", 
     "./js/sideNav.js", 
     "./js/scrollspy.js", 
     "./js/forms.js", 
     "./js/slider.js", 
     "./js/cards.js", 
     "./js/chips.js", 
     "./js/pushpin.js", 
     "./js/buttons.js", 
     "./js/transitions.js", 
     "./js/scrollFire.js", 
     "./js/date_picker/picker.js", 
     "./js/date_picker/picker.date.js", 
     "./js/character_counter.js", 
     "./js/carousel.js", 
     "./sass/materialize.scss", 
     "./fonts/**/*" 
     ] 
    } 
    } 
}