如何将 Foundation 5 与 Compass+SASS 一起使用？答案

【问题标题】：How to use Foundation 5 with Compass+SASS?如何将 Foundation 5 与 Compass+SASS 一起使用？
【发布时间】：2013-12-09 09:45:57
【问题描述】：

问题

Foundation 5上周发布了，很好，但是新版本需要使用bower才能使用F5和SASS，官方文档似乎有点不完整和不成熟。

我正在尝试使用文档建议的步骤创建一个项目：

[sudo] npm install -g bower

然后

gem install foundation

这里没有问题。问题是在创建 Compass 项目时：

foundation new MY_PROJECT
cd MY_PROJECT
compass compile

Compass 编译后，出现如下错误：

directory stylesheets/ 
    error scss/app.scss (Line 1: File to import not found or unreadable: settings.
Load paths:
  /home/cartucho/MY_PROJECT/scss
  /var/lib/gems/1.9.1/gems/compass-0.12.2/frameworks/blueprint/stylesheets
  /var/lib/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets
  /home/cartucho/MY_PROJECT/bower_components/foundation/scss
  Compass::SpriteImporter)
   create stylesheets/app.css

指南针配置文件 (config.rb)：

# Require any additional compass plugins here.
add_import_path "bower_components/foundation/scss"

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "scss"
images_dir = "images"
javascripts_dir = "javascripts"

SASS 文件 (app.sass)：

@import "settings";
@import "foundation";
...

问题似乎出在config.rb:

add_import_path "bower_components/foundation/scss"

因为 Compass 尝试导入文件 settings 和 foundation 失败，但我不知道如何修复它。任何帮助将不胜感激。

谢谢。

【问题讨论】：

确保您已安装指南针。见this answer for more details

标签： zurb-foundation compass-sass

【解决方案1】：

您需要更改行 foundation new MY_PROJECT，将MY_PROJECT 替换为您要安装项目的文件夹。之后，确认这些文件夹存在于你上面指定的目录——“bower_components/foundation/scss”

启动项目时运行compass init，然后运行compass watch（在终端中）以观察.sass 文件的变化。

就个人而言，我不会走那条路，而是使用http://koala-app.com/ 来转换或“编译”我的 Sass。它是免费的，而且很棒。

【讨论】：

非常感谢迈克。我意识到这个问题与 NodeJS 和 Bower 有关。在我的 Ubuntu 中与它们存在版本冲突，并且 Bower 无法正常工作，因此文件夹 bower_components 丢失并且导入失败。我按照以下说明解决了重新安装 NodeJs 的问题：stackoverflow.com/questions/16302436/…（也适用于 Ubuntu 13.10）。谢谢！
我运行了 compass init 并完成了一个新的基础项目。它应该是文档的一部分吗！？！

【解决方案2】：

这是 SASS 所说的。如果我错了，请纠正我，但导入“包含”文件时不需要下划线。我为我的变量和我的混合创建单独的 sass 文件。它们带有前缀和下划线，表示“包含”文件。 SASS 识别 @import “变量”；作为@import“_variables.scss”。因此，当它是一个包含文件时要明确，只需 sass 文件的名称不需要 _ 或 scss 扩展名。

我从未在我命名为 _filename.scss 的任何包含文件前加下划线。

可能还有另一个问题。可能与凉亭的安装和路径有关。对于那些过去确实添加下划线并且它有效的人......好吧，您只需绕过可能成为更深层次的问题。您需要检查您的安装。

【讨论】：

【解决方案3】：

在您的app.sass 文件中更改以下行

@import "settings";

到

@import "_settings";

说明

当你运行compass watch 时，你得到了错误

error scss/app.scss (Line 1: File to import not found or unreadable: settings.

这只是意味着它找不到正在导入的设置文件。通过将下划线添加到设置文件中，您指定了正确的文件路径。如果您收到任何其他类似的错误，请确保文件路径正确。

【讨论】：

【解决方案4】：

我想我也犯了同样的错误；终于在_settings.scss找到了

导入函数前需要下划线

之前：

// Uncomment to use rem-calc() in your settings
@import "foundation/functions";

之后：

// Uncomment to use rem-calc() in your settings
@import "foundation/_functions";

您还需要以同样的方式导入设置。

在我的示例中，我制作了 style.scss 并导入了里面的所有 SCSS：

@import "foundation/_settings",  "_normalize", "_foundation";

【讨论】：

【解决方案5】：

我遇到了同样的问题，但对我来说，解决方案是将app.scss 中设置的导入更改为：

@import "settings";

收件人：

@import "foundation/_settings";

完成后，再次运行compass watch。

【讨论】：

【解决方案6】：

您可以将 Grunt 安装到使用 compass 的 watch 功能的项目中，然后使用其他一些巧妙的东西来编译您的 sass 并在浏览器中重新加载它！这是一个关于如何启动和运行的很棒的教程！（就像在项目的根目录中创建两个新文件然后从命令行运行一些命令一样简单！我强烈建议！）

http://moduscreate.com/get-up-and-running-with-grunt-js/

【讨论】：

【解决方案7】：

我遇到了同样的问题。对于 Ubuntu 14.04 用户，请确保 nodejs 和 Bower 工作正常。您可以在此处按照这些说明进行操作http://www.codediesel.com/javascript/installing-bower-on-ubuntu-14-04-lts/comment-page-1/#comment-63283

【讨论】：