如何与WordPress和Foundation一起使用CodeKit



我是CodeKit和sass的新用户,过去几天我一直在尝试如何正确使用它来改进我的工作流程。

我正在构建一个WP项目,所以我首先用Zurb和compass创建一个新的CodeKit项目。它输出文件,我将它们放入一个名为"Foundation"的文件夹中。然后我放入我的WordPress文件,并将"基金会"文件夹放入我正在WP中的"资产"文件夹中的主题中。我知道在YouTube视频中,CodeKit提到不要把文件拉出来,这样任何链接都不会出错,但我不能把这些文件放在我项目的根目录中,因为它们需要在主题中。

看起来是这样的:

wordpress/theme/assets/foundation

资产也是我的sass文件所在的整个网站

wordpress/theme/assets/sass

我最头疼的是文件的编纂。

我有一个master style.sass文件,我在其中导入了所有的部分,并且工作正常。我想包括基础app.scss文件,这样所有东西都在一个地方,但它不会调用它。它说编译已经完成,但当我查看代码时,它只是导入行,而没有实际输出基础代码。我还发现,如果我把sass的partials放在一个名为partials的文件夹中,CodeKit就无法编译它们,即使我用文件夹名导入它们,例如:partials/layout,而不是layout

我在本地做这件事,所以我不能给你看链接,但我想我只是觉得我设置得完全错误。

我的问题是:

其他人如何使用WordPress和Foundation在CodeKit上设置他们的项目?

将.scs文件导入.sas文件正确吗?

如有任何帮助,我们将不胜感激。

您应该让您的CodeKit项目只包含您正在开发的主题的文件夹。然后,CodeKit应该将foundation、jquery和其他脚本和框架放在一个名为bower_components的文件夹中,因为它使用bower来获取项目的依赖项。

使用bower的优点是可以从命令行更新包,也可以通过CodeKit更新包。您还可以通过将bower_components添加到.gitignore文件中,将依赖关系排除在git repo之外。

查看我使用的基于Roots Sage Starter主题的目录结构

/your-custom-theme-folder
|--/bower_components
   |--/foundation
   |--/jquery
   |--/etc.
|--/assets
   |--/fonts
   |--/images
   |--/scripts
      |--main.js        // custom js for theme goes here
   |--/styles
      |--/modules
      |--/utilities
      |--/etc.
      |--main.scss      // all sass is imported through this file
|--/dist            // all files compile to this directory
   |--/fonts        
   |--/scripts
      |--app.js         // all js files concatenated together
      |--app.min.js
   |--/styles
      |--app.css        // main.scss outputs all imported sass to this file
      |--app.min.css
|--functions.php
|--index.php
|--single.php
|--style.css        // no actual styles in this file, just theme info
|--etc.

最新更新