0

我正在尝试将 Materialize 添加到这个修改后的 sage wordpress 主题中，它是 sage，移除了 bootstrap 以及添加了手写笔和 lostgrid。[该链接是没有实现的 repo，我正在尝试将 Materialize 添加到。]

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

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

您可以在此处查看提交。[这是一个 repo，其中添加了物化bower.json。]

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

根据此页面/评论，唯一需要的步骤就是我在 bower.json 中所做的。

4

1 回答 1

2

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

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

  1. mainMaterialize 项目的属性指向一个 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/**/*"
      ]
    }
  }
}

您还需要在 Wiredep 块之前main.scss将其添加到您的文件中：

$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/**/*"
      ]
    }
  }
}
于 2016-08-03T02:06:44.183 回答