/ / Compass + SASSでFoundation 5を使用するには? - zurb-foundation、compass-sass

Compass + SASSでFoundation 5を使用するには? - zurb-foundation、compass-sass

問題

ファウンデーション5 先週リリースされた、それは素晴らしいですが、新しいバージョンでは、 バワー SASSでF5を使用すると公式の文書は少し不完全で未熟なようです。

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

[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"

コンパスがファイルをインポートしようとして失敗するため settings そして foundation 私はそれを修正する方法を知っていません。どんな助けも高く評価されます。

ありがとう。

回答:

回答№1は8

あなたはラインを変更する必要があります foundation new MY_PROJECT 置き換えて MY_PROJECT プロジェクトをインストールするフォルダを選択します。その後、これらのフォルダが上記で指定したディレクトリに存在することを確認します - "bower_components / foundation / scss"

プロジェクトを開始するとき 走る compass init その後 compass watch (ターミナルで)変更点を監視する .sass ファイル。

個人的に、私はその道に行きません。 http://koala-app.com/ 私のSassを変換するか "コンパイルする"。それは無料で素晴らしいです。


回答№2の場合は3

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

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

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


回答№3の場合は1

あなたの app.sass ファイルを次の行に変更します

@import "settings";

@import "_settings";

説明

あなたが走るとき compass watch あなたはエラーを持っています

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

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


回答№4の場合は1

私は同じエラーがあったと思う。ついに私は _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の場合は0

私はこの同じ問題に遭遇しましたが、私の解決策は、 app.scss から:

@import "settings";

に:

@import "foundation/_settings";

一度それを済ませたら、 compass watch 再び。


答え№6の場合は0

あなたはあなたのプロジェクトにGruntをインストールすることができます。コンパスの腕時計機能を使って、あなたのお尻をコンパイルしてブラウザにライブリロードします!ここでは、起動して実行する方法についての素晴らしいチュートリアルです。 (プロジェクトのルートに2つの新しいファイルを作成し、コマンドラインからいくつかのコマンドを実行するのと同じくらい簡単です!私は真剣にそれをアドバイスします)

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


回答№7は0

私も同じ問題がありました。 Ubuntu 14.04では、nodejsとBowerが適切に動作していることを確認します。 ここの指示に従うことができます http://www.codediesel.com/javascript/installing-bower-on-ubuntu-14-04-lts/comment-page-1/#comment-63283