Edited at

【はじめてのSCSSコンパイル】DreamweaverでSCSSをコンパイルしてみた(OS:Windows10, Dw:CC 18.1)

More than 1 year has passed since last update.

私は現在、SCSS記法の勉強真っ最中です。。。

SCSS記法の勉強を初めた時、一番最初に躓いたのが「コンパイル」。

私は、黒い画面のアレ(コマンドプロンプト)が苦手なので、

Dreamweaverを使ってSCSSをCSSにコンパイルしています。

Dreamweaverを使ったSassのコンパイルについては、

「Adobe Creative Station」 の下記の記事を参考にして行っておりました。


参照元:Dreamweaverで覚える最新Web開発ワークフロー: Sass編 - Adobe Creative Station


しかし、コンパイルというものがよくわからなくて、思いっきり躓いて焦ったものです(汗)

うっかりミスとかをしたときにどうなるかについてなど、画面キャプチャを交えてまとめてみました。


環境について


  • Windows 10 (Pro)

  • Adobe Dreamweaver CC 2018 (18.1)


SCSSファイル作成の流れ


(1)新規ドキュメントを作成する。

SCSS用の新規ドキュメントを作成します。

新規ドキュメントでSCSSを作成.png

ファイル(F) > 新規(N)

で、新規ドキュメント作成画面を開き、

ドキュメントタイプ「SCSS」を選択して「作成」ボタンをクリックします。

そうすると、こんな感じの画面が出てきます。

SCSSの新規ドキュメント.png


(2)コードを記載する

新規ドキュメントを開いたら、よしなにコードを記載します。

SCSSを適当に書いてみる.png


(3)保存する

SCSSドキュメントを保存します。

(ドキュメントタイプ「SCSS」を選択して「作成」したドキュメントは、保存時の拡張子が自動的に”.scss”になります。)

新規ドキュメントを保存する.png

しかし、個人的には、コードを書く前に保存をした方が良いような気もしてます。。。

(理由は後述の「その1:コンパイルができない」をご確認頂ければと思います)


(4)コンパイルする

保存が終わったら、SCSSをコンパイルします。

保存するとコンパイルが選べるようになる.png

ツール(T) > コンパイル(M)

で、コンパイル出来るようになります。

ちなみに、コンパイルをクリックすると・・・

コンパイルしたら、CSSができた.png

デフォルト設定では、コンパイル元のSCSSと同じフォルダーにCSSファイルが作成されます。


(5)期待通りの内容でコンパイルできたか確認する

生成されたCSSを開いて、中身が期待通りの内容になっているか確認します。

無事にコンパイルできました.png

Dreamweaverでコンパイルする場合、SCSSの内容に誤りがあった場合もCSSファイルが生成されます。

そのため、CSSの内容を「開いて確認する」工程は、個人的には大変重要に感じております。

(記載に誤りがあった場合どうなるかについては、「その2:CSSにエラーメッセージが表記される」をご参照ください)


Dreamweaverを使ったコンパイルでハマった事

完全なるウッカリミスですが、、、

コンパイル時に個人的に「あれっ?」となった事例をご紹介します。


その1:コンパイルができない


【現象】コンパイルしようとして、コンパイルが選べない

コンパイルが選べない.png


【対応】ドキュメントを、拡張子”.scss”で保存後、コンパイルをする。

そもそも保存しないと、コンパイルは選択できないのでご注意を。


その2:CSSにエラーメッセージが表記される


【現象】コンパイル後、CSSを開いたらエラーメッセージが記載されている。CSSの内容も期待通りのものができていない。

保存してコンパイルしたらエラー.png

CSSを開いてみると、コメントアウトでErrorの文字がずらり(泣)

初めて見た時には、大変驚いたものです。。。


【対応】元のSCSSに、エラーの元になるものが無いか確認する。

誤字があると、エラーメッセージが出ます_補足つき.png

誤字脱字などがある場合、コメントアウトでエラーメッセージがずらりとならびますのでご注意ください。


その3:コンパイルすると@charset が消失する


【現象】SCSSの最上部に”@charset "utf-8"; ”と記載してコンパイルすると、CSS側では”@charset "utf-8"; ”の表記が消失してしまう

charsetが消失する.png

バグなのか、仕様なのか、どちらかよくわからないのですが、消失してしまいます。


【対応】どこかしらに日本語や全角英数字を記載してコンパイルする

何故かはわからないのですが・・・

contentプロパティに日本語を書いてもcharsetが表示される.png

contentプロパティに日本語のテキストをいれてみたり、

通常のコメントを上に記載してコンパイルするとcharsetが一行目に出る.png

日本語で通常のコメントを”@charset "utf-8"; ”の上に書いたり、

通常のコメントを下に記載してコンパイルするとcharsetが一行目に出る.png

”@charset "utf-8"; ”の下に書いたり、

通常のコメントを真横に記載してコンパイルするとcharsetが一行目に出る.png

”@charset "utf-8"; ”の横に書いたりしてコンパイルすると、

CSSの1行目に”@charset "utf-8"; ”が表示されるようになりました。

「日本語or全角英数字」で「CSS側にも記載が残るように書く」というのがポイントのようです。


【補足】半角英数字や1行コメントを記載した場合は消失する

色々試してみたのですが、、、

1行コメントは記載してもコンパイルするとcharsetが消失.png

コメントの内容が半角英数だと消失する謎.png

何故か、半角英数字だけだったり、1行コメントの方に日本語を残した状態でコンパイルすると、

CSSからcharsetの記載が消失してしまいました。

※できれば消えないでほしいので、今後のアップデートに期待しています。


※他にも、勉強中に躓いたネタが色々あるので、よしなに追記できればと思います。