Eclipse内でCSSの前処理を統合する方法は?[閉まっている]


111

できれば.scssファイルの構文を強調表示して、EclipseでSCSSファイルを編集したいと思います。

私はこれらのリソースが貴重であると感じました:

Eclipseエディター内でSCSS開発を統合するにはどうすればよいですか?

または、より一般的には、CSSプリプロセッサをEclipseに統合するにはどうすればよいですか?


回答:


297

私はEclipseでこれを行う方法を理解しました。このソリューションは100%SASSをサポートしていないことを認めます。ネストされたcssを使用すると色が少しファンキーになりますが、プレーンテキストを見るよりもはるかに優れており、別のエディターをインストールする必要はありません。

.scssファイルタイプをEclipseのネイティブEclipse CSSエディターに関連付ける必要があります[パート1]。その後、.scssファイルタイプをネイティブCSSエディターに追加して、CSSエディターで開くことができるようにする必要があります[パート2]。Eclipseの手順は次のとおりです(私はEclipse Java EE IDE for Web Developers、Indigoを実行しています):

パート1-.scssファイルタイプをネイティブEclipse CSSエディターに関連付ける

  1. に行く Window > Preferences

  2. にドリルダウン General > Editors > File Associations

  3. [ファイルの関連付け]ペインで、右上の[追加...]ボタンをクリックします。

  4. の場合はFile Type:、を入力*.scssしてをクリックしますOK

  5. リストから*.scssエントリを見つけてFile Associations選択します。

  6. を選択*.scssした後、下部のペインAssociated editors:Add...ボタンをクリックします。

  7. Internal editorsが上部で選択されていることを確認してから、検索して選択しCSS Editor、をクリックしますOK

これにより、ファイルタイプ.scssがEclipseのネイティブCSSエディターに関連付けられました。次に、.scssファイルをサポートするようにネイティブCSSエディターを構成する必要があります。これを行うには、次の手順に従います。

パート2-.scssファイルタイプをネイティブCSSエディターに追加する

  1. に行く Window > Preferences

  2. にドリルダウン General > Content Types

  3. [コンテンツタイプ]ペインで、を展開しText、次に選択しますCSS

  4. 後にCSS選択され、下部にあるFile associations:ペイン、クリックAdd...ボタンを。

  5. の場合はContent type:、を入力*.scssしてをクリックしますOK

  6. クリックして[ OK設定]ウィンドウを閉じます。

すべて完了。あとは、開いている.scssファイルをすべて閉じてから再度開き、Eclipseで.scssファイルのws-la、cssの色を開くだけです。

注:CSSの色が表示されない場合は、次の操作を行う必要がある場合がありますRight click the .scss file > Open With > CSS Editor

お役に立てれば。


7
余分なツールをインストールせず、Eclipseをそのまま使用するための+1 ...別のオプションは、「colorer.sourceforge.net/eclipsecolorer
spankmaster79

1
@ spankmaster79 eclipsecolorerはsassファイルのみをサポートします(今日ジュノで試されました)
mons droid

1
@monsはPHPStormに切り替わり、より速く、はるかに優れたサポートとエディターでの保存時のイベントコンパイル。試してみる
spankmaster79 2013

1
eclipsecolorerはscssをサポートしていません。それはサスをサポートしていません。違いがあります。
mrbinky3000 2013

2
メモの追加:.scssファイルを右クリック> [アプリケーションから開く]> [CSSエディターの代わりに使用]> [その他...] CSSエディターをクリックして、「このエディターをすべての 'style.scss'ファイルに使用し、[すべてに使用]にチェックマークを付けます* .scssファイル
ChrisB

11

Aptana StudioはSASS / SCSSの構文カラーリングサポートを提供し、EclipseにプラグインとしてAptanaをインストールすることが可能です。Aptana sownloadサイトからの次の引用を参照してください。

Eclipse経由のインストール

次の更新サイトのURLをクリップボードにコピーしてから、以下の手順に従って、このURLを使用可能なソフトウェアサイトのリストに追加してください。Webブラウザを使用してこのURLにアクセスしようとすると、アクセス拒否エラーが返されます。

http://download.aptana.com/studio3/plugin/install

  1. [ヘルプ]メニューから»[新しいソフトウェアのインストール]を選択して、[新しいソフトウェアのインストール]ダイアログを開きます。
  2. 更新サイトのURLを「作業」テキストボックスに貼り付け、Enter(またはReturn)キーを押します。
  3. 下の入力済みの表で、プラグインの名前の横にあるチェックボックスをオンにして、[次へ]ボタンをクリックします。
  4. [次へ]ボタンをクリックして、ライセンスページに移動します。
  5. 使用許諾契約の条項に同意するオプションを選択し、[完了]ボタンをクリックします。
  6. 続行するには、Eclipseを再起動する必要がある場合があります。

2
Aptanaには独自のテーマカラーリングがあることに注意してください。特定のEclipseカラーテーマに慣れている場合は、Aptanaプラグインをインストールする場合、完全にそれを放棄する必要がある準備をしてください。
Sturm

悪いアイデア!私のEclipseエディターを完全に壊しました。
Branislav Lazic 2016

6

SASSファイルをサポートする「Colorer」と呼ばれる最新のEclipseプラグインを使用できます。ここにあります:http : //colorer.sourceforge.net/eclipsecolorer/index.html

Eclipseの[ヘルプ]メニューから[新しいソフトウェアのインストール]を開き、[ 作業]ボックスに「http://colorer.sf.net/eclipsecolorer」と入力してプラグインをインストールします


自動(Ctrl +スペース)補完をサポートしていますか?
Fuzzo 2014

エラーが多すぎます。ほぼすべての行
Saurabh Bayani 14

Eclipseには、「Liclipse」と呼ばれる新しいソフトウェアがあり、ほとんどの言語で動作します
Fadi Nouh
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.