楽天スーパーSALE開催中! 11日(木) 2時まで

【Phpstorm】Sass、LessをCSSファイルに自動コンパイル

CSSファイルをゴリゴリ書くときに、変数などが使えると便利ですよね、

PHPとかを使って力技でCSSファイルを作成することもできますが、Sass や Less などを使うのが手っ取り早いです。

Sass、LessファイルをPhpStorm上で編集したら、自動でコンパイルしてCSSファイルを生成する方法を紹介します。

 

PhpStormのファイル監視機能を使って、less, sassファイルを編集したら自動的にコンパイルするように設定します。

コンパイルにはRudyで作られたものもあるようですが、今回はnpmで管理されているパッケージ機能を使います。

node.jsをまだインストールしていないなら、こちらの Node.jsとnpmをインストールする方法の記事をあわせてお読みください。

 

スポンサーリンク

npmの更新

まず、npmを更新します。

npmの更新は必須ではありませんので、状況にあわせて行ってください。

npm -v」で現在のバージョンを確認できます。

$ npm -v
5.3.0

   ╭──────────────────────────────────────╮
   │                                      │
   │   Update available 5.3.0 → 6.13.0    │
   │      Run npm i -g npm to update      │
   │                                      │
   ╰──────────────────────────────────────╯

「npm -v」で現在のバージョンを確認

 

npmのアップデートは、 「npm i -g npm」 でアップデートします。

npm ERR! path /usr/local/lib/node_modules/npm/node_modules/aproba
npm ERR! code EACCES
npm ERR! errno -13
npm ERR! syscall access
npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules/npm/node_modules/aproba'
npm ERR!  { Error: EACCES: permission denied, access '/usr/local/lib/node_modules/npm/node_modules/aproba'
npm ERR!   stack: 'Error: EACCES: permission denied, access \'/usr/local/lib/node_modules/npm/node_modules/aproba\'',
npm ERR!   errno: -13,
npm ERR!   code: 'EACCES',
npm ERR!   syscall: 'access',
npm ERR!   path: '/usr/local/lib/node_modules/npm/node_modules/aproba' }
npm ERR! 
npm ERR! Please try running this command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/xxxxx/.npm/_logs/2020-02-18T01_46_43_549Z-debug.log

「npm i -g npm」 でアップデートします

 

権限が無くて怒られたので sudo を付けて、「sudo npm i -g npm」で再度アップデートしてみます。

アップデートが完了したら、念の為「npm -v」でバージョンを確認します。

$ npm -v
6.13.7

 

 

スポンサーリンク

sassのインストール

node-sass というのもあるみたいですが、PhpStormの公式サイトにあるように sass をインストールします

npm install -g sass

-g を付けるとどこからでも使える(global)になります。

sass をインストールします

$ npm install -g sass
/usr/local/bin/sass -> /usr/local/lib/node_modules/sass/sass.js
npm WARN notsup Unsupported engine for sass@1.25.0: wanted: {"node":">=8.9.0"} (current: {"node":"8.5.0","npm":"6.13.7"})
npm WARN notsup Not compatible with your version of node/npm: sass@1.25.0
npm WARN notsup Unsupported engine for chokidar@3.3.1: wanted: {"node":">= 8.10.0"} (current: {"node":"8.5.0","npm":"6.13.7"})
npm WARN notsup Not compatible with your version of node/npm: chokidar@3.3.1
npm WARN notsup Unsupported engine for fsevents@2.1.2: wanted: {"node":"^8.16.0 || ^10.6.0 || >=11.0.0"} (current: {"node":"8.5.0","npm":"6.13.7"})
npm WARN notsup Not compatible with your version of node/npm: fsevents@2.1.2
npm WARN notsup Unsupported engine for readdirp@3.3.0: wanted: {"node":">=8.10.0"} (current: {"node":"8.5.0","npm":"6.13.7"})
npm WARN notsup Not compatible with your version of node/npm: readdirp@3.3.0
npm WARN notsup Unsupported engine for picomatch@2.2.1: wanted: {"node":">=8.6"} (current: {"node":"8.5.0","npm":"6.13.7"})
npm WARN notsup Not compatible with your version of node/npm: picomatch@2.2.1

+ sass@1.25.0
added 16 packages from 22 contributors in 1.236s

 

インストールの確認を「sass –version」でします。バージョンが表示されればOK。

$ sass --version
1.25.0 compiled with dart2js 2.7.0

 

 

スポンサーリンク

PhpstormでSassファイルからcssファイルを自動生成する

sassファイルがまだ無いなら sassファイルを新規作成すると、File Watcherに追加してsassからCSSファイルを自動コンパイルするか聞かれます。

File Watcherに追加してsassからCSSファイルを自動コンパイルするか聞かれます。

 

設定画面から手動で追加するには、設定画面からファイル監視(File Watcher)を選択します。

設定画面からファイル監視(File Watcher)を選択します

 

左下の「+」をクリックして、Compile SassではなくSassを選びます

Compile SassではなくSassを選びます

 

基本的にはPhpStorm側で自動的に入力してくれます。

特に変更せずにそのまま使うことができました。

PhpStorm側で自動的に入力してくれます。

 

設定が終われば後はPhpstorm上で Sass ファイルを編集して保存すると、自動的にcssファイルにコンパイルされます。

左側のプロジェクトツリー状ではSassファイルの下の階層に「css」「css.map」ファイルが表示されます。

Sassファイルの下の階層に「css」「css.map」ファイルが表示されます。

 

 

Lessのインストール

SassだけでなくLessも同じように自動でコンパイルしてCSSファイルを生成できます。

lessのインストールは「npm install –global less」でインストールします。

npm install --global less

※インストールするときは「less」です。

「npm install --global less」でインストールします。

$ npm install --global less
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
/usr/local/bin/lessc -> /usr/local/lib/node_modules/less/bin/lessc
+ less@3.11.1
added 60 packages from 123 contributors in 3.222s

 

 

インストールできたら、「lessc -v」で確認します。

※コマンドは「lessc」で「c」が付きます。

「lessc -v」で確認します。

$ lessc -v
lessc 3.11.1 (Less Compiler) [JavaScript]

 

PhpstormでLessファイルからcssファイルを自動生成する

sassと同じようにPhpstormでlessファイルを新規作成すると、「File Watcher to compile LESS to CSS?」とファイル監視に追加しますかと質問されます。

「はい」と答えるか、設定画面でファイル監視設定の項目を選択すると設定が可能です。

「File Watcher to compile LESS to CSS?」とファイル監視に追加しますかと質問されます。

 

設定画面のファイル監視の「+」ボタンからlessを選択します

lessを選択します

 

sassと同じように必要な項目はPhpstormで埋めてくれるので特に何も設定せずに、lessファイルと同じフォルダにcssファイルは生成されるようになりました。

赤文字が無ければ正常に設定できていると思います。

プログラムが赤文字になっている場合は、lessのインストールに失敗しているかインストール先をPhpstormが検知できていない可能性があります。

必要な項目はPhpstormで埋めてくれる

 

設定が終われば後はPhpstormでLessファイルを編集して保存すると自動的にcssファイルにコンパイルされます。

左側のプロジェクトツリー状ではLessファイルの下の階層に「css」「css.map」ファイルが表示されます。

Lessファイルの下の階層に「css」「css.map」ファイルが表示されます。

 

終わりに。

CSSファイルを編集するなら、変数などが使える Less や Sass は導入すると便利です。

CSSの設定が増えるとゴチャついてきてしまうので、変数などが使えるとパット見でも理解しやすくて書きやすくなります。

個人的にはLessのほうが用途的にも使いやすくて好みですが、Phpstormならどちらでも簡単に自動生成できる環境が作れるので良いですね。

まだ手動でコンパイルしているなら、自動生成で快適な開発環境を構築しちゃいましょう。

 

コメント

目次へ
タイトルとURLをコピーしました