rutas - ¿Cómo compilo un directorio lleno de menos archivos CSS para CSS?

porque no se ve mi imagen en html

Question

Tengo un directorio lleno de menos archivos CSS. ¿Cuál es la mejor forma de compilarlos para un CSS normal? (para el despliegue)

Me gustaría ejecutar un comando de la siguiente manera:

lessc -r less/ css/

donde lessc es menos compilador (instalado a través del administrador de paquetes de nodos)

Answer 1

¡Acabo de encontrar un módulo impresionante de npm para hacer eso! :)

Instalarlo:

$ npm install [-g] lessc-each

Ejecutarlo:

$ lessc-each  ‹dir1›  ‹dir2›

Donde <dir1> es el directorio de Menos archivos para compilar, y <dir2> es el directorio para los archivos de salida. Si <dir2> no existe, se creará automáticamente. Ambos directorios deben ser relativos a la ruta actual de la línea de comando.

Answer 2

Acabo de hacer el guión sobre el trabajo de @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

y entonces:

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

Aunque me gusta Python el mejor y resuelvo la mayoría de los problemas con él, todavía estoy muy contento de utilizar Bash en el entorno de Linux.

Answer 3

Aquí está la solución ideal.

Paso 1: cree un nuevo archivo .less que contenga una declaración @import para cada uno de sus archivos .less existentes.

find less_directory/ -name ''*.less'' -exec echo "@import /"{}/";" /; > combined.less

Paso 2: compila el archivo .less combinado.

lessc combined.less > compiled.css

Answer 4

Basado en la respuesta de Shakaran, pero en lugar de archivos .less.css, crea archivos .css (no use menos en el nombre del archivo, bueno solo en la extensión):

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

Answer 5

Este script bash funciona para mí:

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

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

Answer 6

He escrito un guión hackish que resuelve el problema:

#!/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))]

Idealmente hay una mejor solución.

Answer 7

Hice este script bash muy simple para compilar todos los archivos LESS en un directorio de CSS

#/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

Answer 8

La forma de hacer esto es lo que hace el bootstrap: tener un archivo que importe todos los demás y compilar eso.

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

Answer 9

La forma en que compilé menos archivos en los archivos css correspondientes en el árbol de carpetas actual:

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

Por ejemplo, si tiene main.less en algún lugar del árbol de carpetas, obtendrá main.css en la misma carpeta.

Pero requiere que se instale el comando de rename . Para instalarlo con la ayuda de Homebrew:

brew install rename

Answer 10

Mientras navegaba por todas las demás respuestas, ninguna de ellas funcionó para mí. Encontré una buena solución para manejar mi situación en una combinación de respuestas.

Primero, compila todos los archivos menos en 1 archivo menos. Esto porque podría arrojar errores (como el de arranque uno).

cat less_directory/* > less_directory/combined.less

Ahora que tiene 1 archivo menos en la carpeta menos, puede compilar ese archivo CSS sin que cause problemas:

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

Después de esto, no te olvides de tirar el combinado. Menos, de lo contrario esto arruinará la próxima compilación.

rm -f less_directory/combined.less

Puede automatizar este proceso convirtiéndolo en un script por lotes

Answer 11

Puede usar el siguiente bash one-liner para compilar y todos los archivos menos en un directorio y sus subdirectorios en un solo archivo css "combined.css":

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

O minificado para la producción:

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

Answer 12

Recientemente he tenido problemas con la ejecución de algo así como

lessc directory/*.less foo.css

En lugar de tomar los diferentes LESS y enviarlos a foo.css, modificaría el segundo archivo de la lista. Esto no está bien conmigo.

Para resolver este problema, hice un nuevo menos frontend llamado lessm .

Puede verificarlo en https://github.com/jive/lessm .

La forma en que lo usarías es

lessm foo.less foo2.less ../bar/bazz.less -o output.css

Answer 13

Si alguien está buscando compilar todo el archivo LESS en un árbol de carpetas en Windows. A continuación, mi solución usando un archivo por lotes en WIndows:

Archivo compile-less.bat:

@echo  cd "./pages" for /r %%i in (*.less) do call lessc --clean-css "%%~i" "%%~dpni.min.css" cd ..

Todo el archivo menos en las páginas de la carpeta y sus subcarpetas se compilarán.

Answer 14

Si desea compilar varios archivos menos en varios archivos css, pruebe este script de bash de una sola línea:

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

Obtendrá una lista de archivos .less.css después de ejecutar el comando.

PD: Optimiza adicionalmente ( -O2 ) al máximo, comprime ( -x ) y minimiza con YUI Compressor (- yui-compress ) con una estricta evaluación de importación ( --strict-imports ).

EDITADO : Para las nuevas versiones de YUI Compressor omita -02 y - yui-compress en desuso, por lo tanto:

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