Sass 导入凉亭组件

Question

我已经从 COMPASS 转移到 Libsass，速度很快，但我需要使用一些 bower 组件才能正常工作。

这可能有点迂腐，但我必须像这样在我的 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";

Sass 导入凉亭组件

Sass importing bower components

import

sass

bower

susy