Sass进口凉亭组件

Question

我已经从COMPASS转移到Libsass，速度很快，但我需要使用一些凉亭组件来实现这一点。

它可能有点迂腐，但我必须在我的scss文件的顶部导入我的组件。

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

这很丑，有没有办法通过grunt或别名导入它们，所以我可以做

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

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

希望对你有所帮助！

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