Как использовать CodeKit с WordPress и Foundation

Я новый пользователь CodeKit и sass, и последние несколько дней я играл с ними, пытаясь понять, как правильно их использовать, чтобы улучшить свой рабочий процесс.

Я создаю проект WP, поэтому я начинаю с создания нового проекта CodeKit с помощью Zurb и компаса. Он выводит файлы, и я кидаю их в папку под названием «Основание». Затем я добавляю свои файлы WordPress и папку «Foundation» в тему, над которой я работаю в WP, в папку «активы». Я знаю, что в видео на YouTube CodeKit упоминает, что файлы нельзя вытаскивать, чтобы не перепутались ссылки, но я не могу хранить эти файлы в корне моего проекта, потому что они должны быть внутри темы.

Так это выглядит так:

wordpress/theme/assets/foundation

Активы также являются местом, где хранятся мои файлы sass для всего сайта.

wordpress/theme/assets/sass

Где я зацикливаюсь, так это в компиляции файлов.

У меня есть один мастер-файл style.sass, в который я импортирую все части, и он работает правильно. Я хочу включить базовый файл app.scss, чтобы все было в одном месте, но он его не вызывает. Он говорит, что компиляция завершена, но когда я смотрю на код, это просто строка импорта без фактического вывода основного кода. Я также обнаружил, что если я помещу свои партиалы sass в папку с названием partials, CodeKit не сможет их скомпилировать, даже если я импортирую их с именем папки, например: partials/layout вместо layout.

Я делаю это локально, поэтому не могу показать вам ссылку, но я просто чувствую, что настраиваю это совершенно неправильно.

Мой вопрос:

Как другие настраивают свои проекты на CodeKit с помощью WordPress и Foundation?

Правильно ли импортировать файлы .scss в файл .sass?

Любая помощь будет оценена по достоинству.


frontend wordpress sass workflow codekit
person tmcd    schedule 02.07.2015    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы должны сделать так, чтобы ваш проект CodeKit содержал только папку для темы, которую вы разрабатываете. Затем CodeKit должен поместить Foundation, jquery и другие скрипты и фреймворки в папку с именем bower_components, потому что он использует bower для получения зависимостей проекта.

Преимущество использования bower заключается в том, что вы можете обновлять пакеты из командной строки, а также через CodeKit. Вы также можете убрать зависимости из репозитория git, добавив bower_components в свой файл .gitignore.

Посмотрите на эту структуру каталогов, которую я использую на основе стартовой темы Roots Sage.

/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.
person Colin Marshall    schedule 03.07.2015