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