使用 grunt-sass 编译基础 sass 文件答案

【问题标题】：Compiling foundation sass files with grunt-sass使用 grunt-sass 编译基础 sass 文件
【发布时间】：2014-05-04 16:11:42
【问题描述】：

我已经安装了基础 5 和凉亭。 by compass watch 编译基础文件没有问题，但是当我想使用 grunt-sass 插件时，我看到了这个错误：

Running "sass:development" (sass) task
Warning: C:\wamp\www\nik\myapp/scss/app.scss:2: error: file to import not found or unreadable: "foundation"
 Use --force to continue.

Aborted due to warnings.

app.scss 的第 2 行是 @import "foundation"。还有我的 Gruntfile.js 中的 grunt-sass：

sass: {
      development: {
          options: {
              outputStyle: 'nested'
          },
          files: {
            '.css/development/style.css': ['scss/app.scss', 'scss/style.scss']
          }
      },
      production: {
          options: {
              outputStyle: 'compressed'
          },
          files: {
            '.css/development/style.css': ['scss/app.scss', 'scss/style.scss']
          }
      }

我也测试了this solution，但它没有任何感情。

【问题讨论】：

问题已解决。当我们使用 grunt 编译基础 scss 文件时，我们应该使用 --libsass 来安装基础。 foundation new project_name --libsass
您能否添加更多细节（也许也可以作为问题的答案？）
@streetlight 答案已添加。

标签： sass gruntjs zurb-foundation

【解决方案1】：

只需要在命令行中添加--libsass来安装foundation，会导致安装兼容grunt的foundation：

foundation new A_PROJECT_NAME --libsass

随后在 grunt 中（安装 grunt-sass 之后）：

sass: {
  development: {
      options: {
          outputStyle: 'nested', 
          // Adding foundation source files, so we can @import them.
          includePaths: ['bower_components/foundation/scss']
      },
      files: {
        'css/style.css': ['path/to/styles/app.scss']
      }
  }
}

提示：你可以在 app.scss 最后一行导入自己的 style.scss。

【讨论】：