Question

我正在尝试将Materialise添加到此modified sage wordpress theme这是一个圣训，其中删除了引导程序以及添加了stylus和lostgrid。 [该链接是repo而没有实现我正在尝试添加Materialise。]

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

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

您可以看到commit here。 [这是在bower.json添加了物化的回购。]

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

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

Answer 1

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

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

The main property of the Materialize project指向一个CSS文件和一个缩小的JS文件，这两个都不理想，我们将覆盖它们。
上述第一个问题也意味着在您运行gulp后加载网站时，您会看到控制台404，因为我们也需要覆盖字体。

这是我最终的gulp文件：

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

可以改进覆盖，只使用您需要的单个SCSS组件而不是所有组件。对于JS源代码也是如此（虽然JS文件肯定需要包含在特定的顺序中，但是它们中有很多并且我还没有看到任何需要订购的列表）。

修改

如果你想单独包含JS文件，那么我已经弄明白了这个顺序，如果你删除任何东西并进行彻底的测试，就要小心依赖。

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

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

1 个答案: