Question

问题

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，但我不知道如何修复它。任何帮助将受到高度赞赏。

感谢。

Answer 1

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

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

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

Answer 2

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

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

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

Answer 3

我想我有同样的错误;最后我在_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";

Answer 4

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

@import "settings";

要

@import "_settings";

释

运行compass watch时出现错误

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

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

Answer 5

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

@import "settings";

致：

@import "foundation/_settings";

完成后，再次运行compass watch。

Answer 6

您可以将Grunt安装到您的项目中，该项目使用指南针的监视功能，然后使用其他一些聪明的东西来编译您的sass并在浏览器中实时加载它！这是一个关于如何启动和运行的精彩教程！（它就像在项目的根目录中创建两个新文件然后从命令行运行一些命令一样简单！我认真地建议它！）

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

Answer 7

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

按照这些说明操作

如何使用Compass + SASS的Foundation 5？

7 个答案:

释