import - Sass importing bower components

Question

I have moved over from COMPASS to Libsass, the speeds are great but I need to use a few bower components to get this working.

It may be a bit pedantic but I have to import my components like this at the top of my scss file.

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

It's ugly, is there a way to either import them via grunt or alias the files so I could do

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

Answer 1

要管理您的依赖项，您可以使用Grunt Wiredep ( https://github.com/stephenplusplus/grunt-wiredep ) 自动将文件添加到您的main.scss文件中。

将 main.scss 添加到您的有线配置中。

wiredep: {

  task: {    

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

并将其弹出到您的main.scss文件中。

// bower:scss
// endbower

希望对你有帮助！

Answer 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";