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

【问题标题】：Steps to add Materialize bower package to Sage theme?将 Materialise bower 包添加到 Sage 主题的步骤？
【发布时间】：2016-08-01 18:39:10
【问题描述】：

我正在尝试将 Materialize 添加到此 modified sage wordpress theme 中，它是删除引导程序以及添加手写笔和 lostgrid 的圣人。 [该链接是我试图将 Materialize 添加到的未实现的 repo。]

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

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

您可以看到commit here。 [这是一个将物化添加到 bower.json 的 repo。]

还需要做些什么才能将凉亭包添加到 sage 主题或我做错了什么？

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

【问题讨论】：

标签： wordpress bower materialize roots-sage

【解决方案1】：

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

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

The main property of the Materialize project 指向一个 CSS 文件和一个缩小的 JS 文件，这两个都不理想，我们将覆盖它们。
上面的第一个问题还意味着，当您在运行 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 组件而不是全部。 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/**/*"
      ]
    }
  }
}

【讨论】：