将 Materialise bower 包添加到 Sage 主题的步骤？

Question

我正在尝试将 Materialize 添加到此 modified sage wordpress theme 它是鼠尾草，删除了 bootstrap 并添加了手写笔和 lostgrid。 [link 是没有实现的回购，我正试图将 Materialize 添加到其中。]

我已经添加了这些更改，但 materializecss 和 js 似乎不可用。

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

可以看到commit here。 [这是一个在 bower.json 中添加了物化的回购协议。]

将 bower 包添加到 sage 主题还需要做些什么，或者我做错了什么？

根据这个 page / comment 唯一需要的步骤就是我在 bower.json 中所做的。

Answer 1

我没有看到任何 Bower 库添加到您链接到的存储库中的 bower.json，因此第 1 步是输入您的主题目录和 $ bower install materialize --save。请注意，在删除所有 Bower 软件包并覆盖之后，我在全新安装的 Sage 上执行了此操作（我还评论了 main.scss 中的所有 @import 指令在 wiredep 块之后 以安全地删除 Bootstrap 的 SCSS 变量的任何残余）。如果您决定跳到我的答案的末尾并只使用我的 bower.json 文件作为您自己的文件，那么您只需要输入您的主题目录和运行 $ bower install.

通过 Bower 安装 Materialise 后，您应该能够运行 gulp 并查看 Materialise 的证据，但我们需要解决一些问题：

The main property of the Materialize project指向一个CSS文件和一个缩小的JS文件，这两个都不理想，我们将覆盖它们。

上面的第一个问题也意味着当您在运行ning 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 文件 before wiredep 块：

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

可以改进覆盖以仅使用您需要的单个 SCSS 组件，而不是所有组件。 JS 源代码也是如此（尽管 JS 文件肯定需要按特定顺序包含，但它们有很多而且我还没有在任何地方看到它们需要如何排序的列表）。

编辑

如果你想单独包含 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/**/*" ] } } }

将 Materialise bower 包添加到 Sage 主题的步骤？

Steps to add Materialize bower package to Sage theme?

wordpress

materialize

bower

roots-sage