Импорт стилей Compass с помощью Sass с помощью Yeoman

Я создал проект, используя yo webapp (очевидно, с установленным generator-webapp). Все хорошо, но все равно чего-то не хватает. Я уверен, что это такой простой ответ, что я никогда не вернусь в SO, потому что буду слишком смущен.

Я хочу использовать Compass, который входит в комплект поставки Yeoman, но не знаю, как это сделать. Я имею в виду, очевидно, что @import "compass...etc" внутри любых файлов Sass не будет работать, поскольку внутри app/bower_components (путь по умолчанию для Sass @imports, указанный внутри Gruntfile.js) нет каталога compass.

Что мне теперь делать, чтобы импортировать таблицы стилей Compass?


yeoman compass-sass
person whatyouhide    schedule 31.07.2013    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете использовать компас, как обычно. Если вы настроили ванильный проект компаса с compass create, также будет compass папка. Если вы хотите использовать какой-либо из вспомогательных компонентов, с которыми поставляется компас, вы можете импортировать их, как описано в документации, например

@import "compass/css3";

.mybox {
    @include box-shadow(red 2px 2px 10px);
}

main.scss

person passy    schedule 01.08.2013

arrow_upward
1
arrow_downward

Вам нужно будет установить задачу grunt для компаса с npm install grunt-contrib-compass и настроить Gruntfile.js, чтобы добавить задачу для компиляции компаса.

Это может показаться не таким уж простым, поскольку в нем есть некоторые хитрые части, например, скомпилировать ваш sass в .temp/main.css, чтобы использовать его для тестирования / livereload, а затем минимизировать его в ваш dist при окончательной сборке.

Самый простой способ - просто попробовать другой генератор, у которого компас находится в отдельном каталоге. Например, у генератора angular есть компас и даже бутстрап для компаса. Это довольно круто.

person dmitrybelyakov    schedule 02.08.2013