Help us understand the problem. What is going on with this article?

特定フォルダ配下のすべてのlessファイルをcssにコンパイルする

HTMLをUIに使っているアプリケーションをコンパイルするときにたまにあるのが、うっかりLESSファイルをCSSに変換し忘れてしまうということ。

そのようなとき、デプロイ用のスクリプトに「すべてのLESSファイルをCSSにコンパイルする」ようなコードがあると便利です。

1
ls .\html\*.less | % { .\node_modules\.bin\lessc ($_.FullName) > ($_.FullName -replace "\.less$", ".css") }

前提条件

前提条件として、以下の二つがあります。

  • lessファイルはすべてhtmlフォルダに格納されていること。
  • npm install -save-devlesscが既にインストールされていること

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ファイルが出力されます)。

参考記事

TakamiChie
NPO法人 まちづくりエージェント SIDE BEACH CITY.理事。フリーランスのプログラマ。横浜・横須賀でIT勉強会の主催などをやってます。
https://onpu-tamago.net/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした