web-dev-qa-db-ja.com

少ないcssファイルでいっぱいのディレクトリをcssにコンパイルするにはどうすればよいですか？

少ないcssファイルでいっぱいのディレクトリがあります。それらを通常のCSSにコンパイルする最良の方法は何ですか？ （展開用）

次のようにコマンドを実行したい：

lessc -r less/ css/

ここで、lesscはlessコンパイラーです（ノードパッケージマネージャー経由でインストールされます）

cssless
47
ocoutts

これを行う方法は、bootstrap=が行うことです-他のすべてをインポートしてコンパイルするファイルがあります。

@import "variables.less"; 
@import "mixins.less";
74
Damian

次のbashワンライナーを使用して、ディレクトリとそのサブディレクトリ内のすべてのファイルを単一のcssファイル「combined.css」にコンパイルできます。

$ find less_directory/ -name '*.less' -exec lessc {} \; > combined.css

または本番用に縮小：

$ find less_directory/ -name '*.less' -exec lessc -x {} \; > combined.css
23
Dan Noble

複数の少ないファイルを複数のcssファイルにコンパイルする場合-ライナーbashスクリプト：

for file in *.less; do lessc -x --yui-compress -O2 --strict-imports $file `basename $file`.css ; done

コマンドを実行すると、.less.cssファイルのリストが表示されます。

PS：最大で（-O2）を最適化し、（-x）を圧縮して YUI Compressorで縮小します （-yui-compress）厳密なインポート評価（-strict-imports）.

[〜＃〜] edited [〜＃〜]：新しいYUI Compressorバージョンの場合、-02と--yui-compressは非推奨になります。

for file in *.less; do lessc -x --strict-imports $file `basename $file`.css ; done
11
shakaran

このbashスクリプトは私のために機能します：

find "$PWD" -name '*.less' | while read line; do
    REPLACE=`echo $line | sed "s|\.less|\.css|"`

    # echo "$line --> $REPLACE"
    (lessc "$line" "$REPLACE" &)
done
6
iloveitaly

ディレクトリ内のすべてのLESSファイルをCSSにコンパイルするために、この非常にシンプルなbashスクリプトを作成しました

#/bin/bash
echo "Compiling all LESS files to CSS"
for file in *.less
do
    FROM=$file
    TO=${file/.*/.css}
    echo "$FROM --> $TO"
    lessc $FROM $TO
done
4
Sam Stern

@iloveitalyの作業の上にスクリプトを作成しました。

#!/bin/bash
# file name: lesscdir

if [[ -z $1 || -z $2 ]];then
    echo 'both arguments are needed'
    exit
fi

find $1 -name '*.less' -printf '%P\n' | while read name; do
    FROM=$(echo $1'/'$name)
    TO=$(echo $2'/'$name | sed "s|\.less|\.css|")
    TO_DIRNAME=$(dirname $TO)
    if [ ! -e $TO_DIRNAME ];then
        mkdir -p $TO_DIRNAME
    fi
    echo 'Compiling' $FROM '->' $TO
    lessc $FROM $TO
done

その後：

$ chmod +x lesscdir
$ Sudo ln -s $(readlink -f lesscdir) /usr/local/bin/

私はpythonが最良であり、それに関するほとんどの問題を解決していますが、Linux環境でbashを使用することは非常に満足しています。

3
Reorx

問題を解決するハック的なスクリプトを作成しました。

#!/usr/bin/env python


#This is responsible for "compiling" less.css files to regular css files for production. It also minifies the css at the same time. 

#Usage: give it a start directory as the first parameter and an end directory as the second parameter. It will recursivly run the appropriate command for all css files in the first subdirectory.


import os
import sys
import re
if len(sys.argv) < 3:
    sys.exit('ERROR: Too many paths!! No less css compiled')
if len(sys.argv) > 3:
    sys.exit('ERROR: Not enough paths!! No less css compiled')

start_dir=os.path.join(os.getcwd(),sys.argv[1])
end_dir=os.path.join(os.getcwd(),sys.argv[2])
pattern=r'\.css$'
pattern=re.compile(pattern)

files_compiled=0

def copy_files(start, end, add=''):
    global files_compiled
    try:
      os.mkdir(end)
    except:
      pass
    for folder in get_immediate_subdirectories(start):
      copy_files(os.path.join(start,folder), os.path.join(end+folder), add+folder+'/')
    for less in os.listdir(start):
      if pattern.search(less):
        os.system('lessc -x %s > %s'%(start+less,end+less))
        print add+less
        files_compiled=files_compiled+1

def get_immediate_subdirectories(dir):
    return [name for name in os.listdir(dir)
            if os.path.isdir(os.path.join(dir, name))]

理想的には、より良いソリューションがあります。

3
ocoutts

最近、私は次のようなものを実行する際に問題が発生しています

lessc directory/*.less foo.css

異なるLESSを取得してfoo.cssに出力する代わりに、リストの2番目のファイルを変更します。これは私には問題ありません。

この問題を解決するために、lessmという新しいフロントエンドを作成しました。

https://github.com/jive/lessm で確認できます。

使用方法は

lessm foo.less foo2.less ../bar/bazz.less -o output.css
1
Jessie A. Morris

素晴らしい npm module が見つかりました！ :)

インストールしてください：

$ npm install [-g] lessc-each

それを実行します：

$ lessc-each  ‹dir1›  ‹dir2›

ここで、‹dir1›はコンパイルするLessファイルのディレクトリであり、‹dir2›は、出力ファイルのディレクトリです。 ‹dir2›が存在しない場合、自動的に作成されます。両方のディレクトリは、コマンドラインの現在のパスに対して相対的でなければなりません。

1
Gustavo Cavalieri Fernandes

Shakaranの答えに基づいていますが、.less.cssファイルの代わりに、.cssファイルを作成します（ファイル名にはlessを使用せず、拡張子のみに使用してください）。

for file in *.less; do lessc -x --strict-imports $file `basename $file | sed -e "s/less/css/"` ; done
1
Paul-Armand Verhaegen

他のすべての回答を閲覧している間、それらのどれも私のために働きませんでした。私は答えを組み合わせて自分の状況を処理するための良い解決策を見つけました。

最初に、すべての少ないファイルを1つの少ないファイルにコンパイルします。これは、エラーをスローする可能性があるためです（bootstrap oneなど）。

cat less_directory/* > less_directory/combined.less

Lessフォルダーに1つのlessファイルがあるので、問題を引き起こすことなく、その1つのcssをコンパイルできます。

lessc less_directory/combined.less > css/style.css

この後、combined.lessを捨てることを忘れないでください。そうしないと、次のコンパイルが台無しになります。

rm -f less_directory/combined.less

このプロセスをバッチスクリプトにすることで自動化できます

0
Rene Pot

すべてのLESSファイルをWindowsのフォルダーおよびサブフォルダーツリーにコンパイルする場合。次のソリューションは、Windowsでバッチファイルを使用しています。

ファイルcompile-less.bat：@echo
cd ".\pages" for /r %%i in (*.less) do call lessc --clean-css "%%~i" "%%~dpni.min.css" cd ..

編集済みフォルダーおよびサブフォルダー内のすべてのファイルがコンパイルされます。 Windows 10および8.1でテスト済み

0
DAme

現在のフォルダーツリー内の対応するcssファイルに少ないファイルをコンパイルした方法：

find ./ -name '*.less' -type f -exec lessc {} {}.css \; -exec rename -f 's/.less.css/.css/' {}.css \;

たとえば、main.lessフォルダツリーのどこかに、main.css同じフォルダ内。

ただし、renameコマンドをインストールする必要があります。 Homebrewを使用してインストールするには：

brew install rename
0
starikovs