web-dev-qa-db-ja.com

Compass + SASSでFoundation5を使用するにはどうすればよいですか？

問題

Foundation 5 先週リリースされましたが、それは素晴らしいことですが、新しいバージョンではSASSでF5を使用するために bower を使用する必要があり、公式ドキュメントは少し不完全で未成熟のようです。

ドキュメントで提案されている手順を使用してプロジェクトを作成しようとしています。

[Sudo] npm install -g bower

その後

gem install foundation

ここでは問題ありません。問題は、コンパスプロジェクトを作成するときです。

foundation new MY_PROJECT
cd MY_PROJECT
compass compile

コンパスのコンパイル後、次のエラーが発生します。

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のインポートに失敗したのですが、修正方法がわかりません。どんな助けでも大歓迎です。

ありがとう。

zurb-foundationcompass-sass
9
Cartucho

行を変更する必要がありますfoundation new MY_PROJECTMY_PROJECTをプロジェクトをインストールするフォルダ。その後、これらのフォルダが上記で指定したディレクトリ「bower_components/Foundation/scss」に存在することを確認します

プロジェクトを開始するときcompass initを実行し、次にcompass watch（ターミナルで）を実行します）.sassファイルの変更を監視します。

個人的に、私はそのルートに行かず、 http://koala-app.com/ を使用してSassを変換または「コンパイル」します。それは無料で素晴らしいです。

8
Mike Barwick

これはSASSが話していたものです。私が間違っている場合は訂正してください。ただし、「インクルード」ファイルをインポートするときにアンダースコアは必要ありません。変数とミックスイン用に別々のsassファイルを作成します。これらには、「インクルード」ファイルを示す接頭辞とアンダースコアが付いています。 SASSは@import「変数」を認識します。 @import "_variables.scss"として。したがって、インクルードファイルの場合は明確にするために、sassファイルの名前だけで_やscss拡張子は必要ありません。

_filename.scssという名前のインクルードファイルの前にアンダースコアを付けたことはありません。

おそらく別の問題が起こっています。おそらくインストールとバウアーのパスがあります。過去にアンダースコアを追加し、それが機能した人にとっては...まあ、将来的に深刻な問題になる可能性のあるものをバイパスするだけです。インストールを確認する必要があります。

3
agon024

同じエラーが発生したと思います。ついに私は_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";
1
Sherif SALEH

app.sassファイルで次の行を変更します

@import "settings";

に

@import "_settings";

説明

compass watchを実行すると、エラーが発生します

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

これは、インポートされている設定ファイルが見つからないことを意味します。設定ファイルにアンダースコアを追加することにより、正しいファイルパスを指定しました。このような他のエラーが発生した場合は、ファイルパスが正しいことを確認してください。

1
zechdc

これと同じ問題が発生しましたが、私にとっての解決策は、app.scssの設定のインポートを次の場所から変更することでした。

@import "settings";

に：

@import "foundation/_settings";

それが終わったら、もう一度compass watchを実行します。

0
Eric Daams

Gruntをプロジェクトにインストールして、コンパスの監視機能を使用してから、他の巧妙な機能を使用してSassをコンパイルし、ブラウザーにライブリロードすることができます。これは、それを起動して実行する方法に関する優れたチュートリアルです！ （プロジェクトのルートに2つの新しいファイルを作成し、コマンドラインからいくつかのコマンドを実行するのと同じくらい簡単です！私は真剣にアドバイスします！）

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

0
Thomas_Hoadley

私も同じ問題を抱えていました。 Ubuntu 14.04ユーザーの場合、nodejsとBowerが正しく機能していることを確認してください。ここでこれらの手順に従うことができます http://www.codediesel.com/javascript/installing-bower-on-ubuntu-14-04-lts/comment-page-1/#comment-6328

0
user3257693