Sass导入Bower组件

Question

我已经从COMPASS转到了Libsass，速度非常快，但是我需要使用一些Bower组件才能使其正常工作。

可能有点啰嗦，但我必须在我的scss文件顶部像这样导入我的组件。

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

很丑，有没有办法通过Grunt导入它们或者为这些文件设置别名，以便我可以做到：

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

- LeBlaireau

Answer 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

希望这可以帮到你！

- Lucas Barros

Answer 2

在这种情况下，我刚使用了带有Gruntfile.js的grunt，通过添加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";

- Kostanos