Sass импортирует компоненты

Я перешел из COMPASS в Libsass, скорости велики, но мне нужно использовать несколько компонентов bower, чтобы заставить это работать.

Это может быть немного педантичным, но мне нужно импортировать мои компоненты, как это, в верхней части моего scss файла.

   @import "../bower_components/compass-mixins/lib/compass";
   @import "../bower_components/susy/sass/susy";

Это уродливо, есть ли способ импортировать их через grunt или псевдонимы файлов, чтобы я мог делать

 @import "compass";
 @import "susy";

Ответ 1

Чтобы управлять зависимостями, вы можете использовать Grunt Wiredep (https://github.com/stephenplusplus/grunt-wiredep), чтобы автоматически добавлять файлы в ваш файл main.scss.

Добавьте main.scss в конфигурацию wiredep.

wiredep: {

  task: {    

    src: [
      'app/styles/main.scss',  // .scss & .sass support...
    ]
  }
}

И поместите это в свой файл main.scss.

// bower:scss
// endbower

Надеюсь, что вам поможет!

Ответ 2

Я просто использовал grunt с Gruntfile.js в этом случае, добавив loadPath с расположением папки bower_components, он находится на том же уровне, что и проект в моем случае:

    sass: {
        dev: {
            options: {
                style: 'expanded',
                compass: false,
                loadPath: 'bower_components'
            },
            files: {
                '<%= project.css %>/style.css': '<%= project.scss %>/style.scss'
            }
        }
    },

После того как вы просто измените свой раздел @import на:

@import "compass-mixins/lib/compass";
@import "susy/sass/susy";