將Materialise bower包添加到Sage主題的步驟？

我試圖添加Materialise到這個modified sage wordpress theme這是鼠尾草隨着手寫筆和lostgrid添加刪除bootstrap。 [該鏈接是回購沒有實現，我試圖添加Materialise。]將Materialise bower包添加到Sage主題的步驟？

我已經添加這些更改，但materializecss和js似乎不可用。

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

您可以看到commit here。 [這是一個回購，其物料添加到bower.json。]

還需要做些什麼才能添加涼亭包裝到聖人主題或我做錯了什麼？

根據這page/comment所需的唯一步驟是我在bower.json中所做的。

來源

2016-08-01 Shwaydogg

我沒有看到任何鮑爾圖書館添加到您鏈接的回購bower.json，所以第1步是進入您的主題目錄和$ bower install materialize --save。請注意，我進行這個上全新安裝賢者之後，我刪除了所有鮑爾包和覆蓋（我也評論都在main.scss的@import指令的wiredep塊後前來安全地移除引導的SCSS變量的任何殘餘）。如果您決定跳到我的答案的末尾，只需使用我自己的bower.json文件，那麼您只需輸入您的主題目錄並運行$ bower install即可。

通過鮑爾安裝Materialise的，你應該能夠運行gulp，看到Materialise的證據後，但也有我們需要解決的幾個問題：

The main property of the Materialize project指向一個CSS文件和精縮JS文件，這兩個都不是理想的，我們會覆蓋它們。

上面的第一個問題也意味着，在運行gulp後加載網站時，您會看到控制檯404s，因爲我們也需要重寫字體。

這是最後的bower.json文件我結束了：

{ "name": "sage", "homepage": "https://roots.io/sage/", "authors": [ "Ben Word <[email protected]>" ], "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組件而不是所有的人。 JS源代碼也是如此（儘管JS文件肯定需要包含在特定的順序中，其中有很多，而且我還沒有看到它們需要訂購的列表）。

編輯

如果你想加入JS文件單獨，我已經想通了的順序，只需提防依賴的，如果你刪除任何東西和測試徹底。

{ "name": "sage", "homepage": "https://roots.io/sage/", "authors": [ "Ben Word <[email protected]>" ], "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/**/*" ] } } }

來源

2016-08-03 02:06:44 cfx

將Materialise bower包添加到Sage主題的步驟？

回答

相關問題