Как использовать Foundation 5 с компасом+SASS?

проблема

5 был выпущен на прошлой неделе, это здорово, но новая версия требует использовать беседке для использования F5 с SASS и официальная документация кажется немного неполной и незрелой.

я пытаюсь создать проект, используя шаги, предложенные документы:

[sudo] npm install -g bower

а то

gem install foundation

здесь нет проблемы. Проблема заключается в создании Проект "компас":

foundation new MY_PROJECT
cd MY_PROJECT
compass compile

после компиляции компаса я получаю следующую ошибку:

directory stylesheets/ 
    error scss/app.scss (Line 1: File to import not found or unreadable: settings.
Load paths:
  /home/cartucho/MY_PROJECT/scss
  /var/lib/gems/1.9.1/gems/compass-0.12.2/frameworks/blueprint/stylesheets
  /var/lib/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets
  /home/cartucho/MY_PROJECT/bower_components/foundation/scss
  Compass::SpriteImporter)
   create stylesheets/app.css

компас файл config (config.rb):

# Require any additional compass plugins here.
add_import_path "bower_components/foundation/scss"

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "javascripts"

файл SASS (app.sass):

@import "settings";
@import "foundation";
...

проблема, кажется, в config.rb:

add_import_path "bower_components/foundation/scss"

потому что Compass не удается импортировать файлы settings и foundation но я не знаю как это исправить. Любая помощь будет высоко оцененный.

спасибо.

9
compass-sass zurb-foundation

7 ответов

вам нужно изменить строку foundation new MY_PROJECT заменить MY_PROJECT С папке, которую вы хотите установить проект. После этого убедитесь, что эти папки существуют в указанном выше каталоге - "bower_components/foundation / scss"

при запуске проекта run compass init а то compass watch (в терминале) следить за изменениями на .sass файлы.

лично, Я не иду, что маршрут и использованиеhttp://koala-app.com/ конвертировать или" компилировать " мой Sass. Это бесплатно и потрясающе.

8

Это Сасс говорили. Пожалуйста, исправьте меня, если я ошибаюсь, но вам не нужно подчеркивание при импорте файла "include". Я создаю отдельные файлы sass для своих переменных и моих миксов. Они имеют префикс и подчеркивание, что означает файл" include". SASS распознает @import "переменные"; как @import " _variables.scss". Поэтому, чтобы быть ясным, когда это файл include, просто имя файла sass не нужно расширение _ или scss.

Я никогда не ставил подчеркивание перед любым включенным файлом, который я назвал _filename.scss.

нет, наверное, другой вопрос, происходит. Возможно, с установкой и путями для bower. Для тех, кто добавил подчеркивание в прошлом, и это сработало...ну, вы просто обходите то, что может стать более глубокой проблемой в будущем. Вам нужно проверить свою установку.

3

в своем app.sass файл изменить следующую строку 

@import "settings";

до

@import "_settings";

объяснение

при выполнении compass watch вы получили ошибку 

error scss/app.scss (Line 1: File to import not found or unreadable: settings.

Это просто означает, что он не может найти импортируемый файл настроек. Добавив символ подчеркивания в файл настроек, вы указали правильный путь к файлу. Если вы получаете какие-либо другие ошибки, как это, убедитесь, что путь к файлу является правильным.

1

Я думаю, что у меня была такая же ошибка; наконец я нашел в _settings.scss

вам нужно подчеркнуть перед импортом функций

перед:

// Uncomment to use rem-calc() in your settings
@import "foundation/functions";

после:

// Uncomment to use rem-calc() in your settings
@import "foundation/_functions";

Также вам нужно будет импортировать настройки таким же образом.

в моем примере я сделал стиль.scss и импортировать все SCSS внутри:

@import "foundation/_settings",  "_normalize", "_foundation";
1

я столкнулся с этой же проблемой, но для меня решением было изменить импорт настроек в app.scss from:

@import "settings";

в:

@import "foundation/_settings";

как только вы это сделаете, бегите compass watch снова.

0

вы можете установить Grunt в свой проект, который использует функцию часов compass, а затем некоторые другие умные вещи, чтобы скомпилировать ваш sass и livereload его в браузере! Вот отличный учебник о том, как получить его и работает! (это так же просто, как создать два новых файла в корне вашего проекта, а затем запустить несколько команд из командной строки! Я серьезно советую!)

http://moduscreate.com/get-up-and-running-with-grunt-js/

0

У меня была та же проблема. Для пользователей Ubuntu 14.04 убедитесь, что nodejs и Bower работают правильно. Вы можете следовать этим инструкциям здесь http://www.codediesel.com/javascript/installing-bower-on-ubuntu-14-04-lts/comment-page-1/#comment-63283

0