WindowsでSublime Text3のLess-buildを使おうとするとエラーが出る

SublimeText3にPackage ControlからLess-buildって便利なLessコンパイルパッケージがあるけどWindowsでは(Sublime3では)そのままだと動かない。

原因

このパッケージはMac,Linuxではlesscを使うけどWindowsでは独自のdotLess.Compiler.exeを使う。(つまりlesscをインストールしていなくてもビルド出来る)

でもこのパッケージはSublime3では自動的には展開されず、パッケージディレクトリに該当する実行ファイルが存在しない。

解決法1 展開する

Sublime Text 3\Installed Packages\LESS-build.sublime-packageをzipとしてPackages\LESS-buildに展開する

これで付属のコンパイラは使えるようになります。

でもこれ、1年以上メンテされていなくて少し古くなってそう。
次の方法ならnpmとかでインストールした最新のlesscが使えます。

解決法2 .build-systemを作る

システムのlesscを呼び出す設定ファイルを作っちゃいましょう!

なお、この方法ならPackage Controlからのインストール等は不要

解決法1で既に展開している場合はC:\Users\UserName\AppData\Roaming\Sublime Text 3\Packages\LESS-build\LESS.sublime-buildを編集、していなければC:\Users\UserName\AppData\Roaming\Sublime Text 3\Packages\User\LESS.sublime-buildを作って書き込んでください。

{
    "cmd": ["lessc", "$file", "${file_path}/${file_base_name}.css", "--verbose"],
    "file_regex": "^[ ]*File \"(...*?)\", line ([0-9]*)",
    "selector": "source.css.less",

    "osx":
    {
        "path": "/usr/local/bin:$PATH"
    },

    "windows":
    {
    //    "cmd": ["$packages\\LESS-build\\dotless.Compiler.exe", "$file", "${file_base_name}.css"] //To just store the css in the same folder as the less
        "cmd": ["lessc.cmd", "$file", "${file_base_name}.css","--verbose"],

    },

    "variants": [
        {
            "name": "Minify",
            "cmd": ["lessc", "$file", "${file_path}/${file_base_name}.min.css", "-x", "--verbose","--source-map"],

            "osx":
            {
                "path": "/usr/local/bin:$PATH"
            },
            "windows":
            {
            //    "cmd": ["$packages\\LESS-build\\dotless.Compiler.exe", "-m", "${file}", "${file_base_name}.min.css"]
                "cmd": ["lessc.cmd", "$file", "${file_base_name}.min.css", "-x" , "--verbose","--source-map"]
            }
        }
    ]
}

なお、source_mapに対応させてます。いらない場合は消して。

タグ:,

コメントを残す

%d人のブロガーが「いいね」をつけました。