Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@TakamiChie

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

More than 1 year has passed since last update.

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

参考記事

0
Help us understand the problem. What is going on with this article?
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
TakamiChie
NPO法人 まちづくりエージェント SIDE BEACH CITY.理事。フリーランスのプログラマ。横浜・横須賀でIT勉強会の主催などをやってます。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?