質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
IntelliJ IDEA

IntelliJ IDEA(インテリジェイ アイディア)は、JetBrains社が開発した、 JavaやScalaなどで利用される統合開発環境です。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

compass

CompassはSassを拡張したオープンソースのCSSフレームワークです。 特徴は、ベンダープレフィックス等の複雑なCSSを手軽に記述できる点、 CSSスプライト画像を簡単に作成できる点などが挙げられます。

Q&A

解決済

1回答

9102閲覧

CompassによるSCSSのコンパイルに失敗する

kefi3104

総合スコア33

IntelliJ IDEA

IntelliJ IDEA(インテリジェイ アイディア)は、JetBrains社が開発した、 JavaやScalaなどで利用される統合開発環境です。

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

compass

CompassはSassを拡張したオープンソースのCSSフレームワークです。 特徴は、ベンダープレフィックス等の複雑なCSSを手軽に記述できる点、 CSSスプライト画像を簡単に作成できる点などが挙げられます。

0グッド

0クリップ

投稿2016/04/30 03:13

編集2016/04/30 03:31

Intellij IDEAにてCompassを使おうとしているのですが、どうしても以下のエラーが消えません。

Individual stylesheets must be in the sass directory.

開発環境

  • Mac OX Yosemite 10.10.5
  • Intellij IDEA 2016.1.1
  • Compass 1.0.3
  • ruby 2.2.3p173
  • Sass 3.4.22

File Watcherを使わずに直接コマンドラインでコンパイルをしようとしても同じ同じエラーが出ます。

compass compile [scssのディレクトリパス] [cssのディレクトリパス] -c [config.rbのディレクトリパス]

以下を参考に、設定はすべて完了しているはずなのですが・・・
http://blog.jetbrains.com/jp/2013/12/10/326

config.rbのパスは何度確認しても間違いはありませんし、パス名に日本語も使われていません。
config.rbの内容は以下です。

ruby

1# Compass is a great cross-platform tool for compiling SASS. 2# This compass config file will allow you to 3# quickly dive right in. 4# For more info about compass + SASS: http://net.tutsplus.com/tutorials/html-css-techniques/using-compass-and-sass-for-css-in-your-next-project/ 5 6 7######### 8# 1. Set this to the root of your project when deployed: 9http_path = "/" 10 11# 2. probably don't need to touch these 12css_dir = "../css" 13sass_dir = "./" 14images_dir = "../images" 15javascripts_dir = "../js" 16environment = :development 17relative_assets = true 18 19 20# 3. You can select your preferred output style here (can be overridden via the command line): 21output_style = :expanded 22 23# 4. When you are ready to launch your WP theme comment out (3) and uncomment the line below 24# output_style = :compressed 25 26# To disable debugging comments that display the original location of your selectors. Uncomment: 27# line_comments = false 28 29# don't touch this 30preferred_syntax = :scss

他に確認するべきところがあればご教授いただけますと幸いですm(_ _)m

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

質問中のエラーですが、Compass Issue#1769によると、Compassのバグかもしれません。
しかしその前に1つ気になる点があります。
質問中でのコンパイルのオプションが次のようになっていますが、

compass compile [scssのディレクトリパス] [cssのディレクトリパス] -c [config.rbのディレクトリパス]

compass help compileを参考にすると、

compass compile [プロジェクトのディレクトリパス] [scssのファイルパス] -c [config.rbのディレクトリパス]

なのではないかと思います。(特にcssの"ディレクトリ"ではなくて、scssの"ファイル"のパスだと思います。)

解決策ですが、
質問中のconfig.rbの設定を参考にすると、おそらく次のようなディレクトリ構造なのではと思うのですが、
Compass Issue#1769を参考にすると、続くconfig.rbのように書くとうまく動きそうです。

ディレクトリ構造

/path/to/project ├── css ├── images ├── js └── scss ├── config.rb ├── ie.scss ├── print.scss ├── sample.scss └── screen.scss

config.rb(差分)

diff

1--- before.rb 2016-05-01 13:28:10.876743300 +0900 2+++ after.rb 2016-05-01 13:29:26.987143600 +0900 3@@ -11,6 +11,7 @@ 4 # 2. probably don't need to touch these 5 css_dir = "../css" 6 sass_dir = "./" 7+sass_path = File.expand_path(sass_dir, project_path) 8 images_dir = "../images" 9 javascripts_dir = "../js" 10 environment = :development

コマンド

bash

1# $ pwd 2# /path/to/project 3# とする 4 5# ファイルごとにコンパイル 6$ compass compile ./ ./scss/ie.scss -c ./scss/config.rb 7 8# project全体ならば下記で良い 9$ compass compile ./ -c ./scss/config.rb

投稿2016/05/01 04:55

編集2016/05/01 05:14
toko

総合スコア144

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kefi3104

2016/05/01 05:10

ご丁寧に有難うございました! ご指摘の通り、Compassバグのようでした。 教えていただいたコードをconfig.rbに追記しましたところ、コンパイルが正常に行われました。 IntellijのFile Watcherでも動作することを確認できました。 compileのパスのご指摘についてもありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問