HTMLをUIに使っているアプリケーションをコンパイルするときにたまにあるのが、うっかりLESSファイルをCSSに変換し忘れてしまうということ。
そのようなとき、デプロイ用のスクリプトに「すべてのLESSファイルをCSSにコンパイルする」ようなコードがあると便利です。
1
ls .\html\*.less | % { .\node_modules\.bin\lessc ($_.FullName) > ($_.FullName -replace "\.less$", ".css") }
前提条件
前提条件として、以下の二つがあります。
- lessファイルはすべて
htmlフォルダに格納されていること。 -
npm install -save-devでlesscが既にインストールされていること
PowerShellのバージョンによる挙動の違い
なお、PowerShell 5.xで実行すると、このスクリプトによって生成されるCSSファイルは強制的に(LESSファイル内部の指定を無視して)UTF16で出力されます。
たとえば以下のようにすると、UTF-16をUTF-8に変換することができますが、BOMつきです(PowerShell 5.xの制限で、BOM無しに変更するにはPowerShellのコマンドが使えません)。
2
ls .\html\*.less | % { .\node_modules\.bin\lessc ($_.FullName) > ($_.FullName -replace "\.less$", ".css16") }
Get-ChildItem .\html\*.css16 | % { Get-Content -Encoding Unicode ".\html\$($_.Name)" | Set-Content -Encoding UTF8 ".\html\$($_.BaseName).css" }
Remove-Item .\html\*.css16
PowerShell 6.xを入れると、1のコードを実行しただけでUTF-8になりますので、BOM無しUTF-8を使いたい場合はPowerShell 6.xをインストールしてから、そのコンソール上でスクリプトを利用しましょう(逆にPowerShell 6.xにすると、2のコードのような処理を行うと、文字化けしたCSSファイルが出力されます)。