importar archivo .css a archivo .less

¿Puedes importar archivos .css en archivos .less ...?

Estoy bastante familiarizado con menos y lo uso para todo mi desarrollo. Regularmente uso una estructura de la siguiente manera:

@import "normalize";

//styles here

@import "mixins";
@import "media-queries";
@import "print";

Todas las importaciones son otros archivos .less y todo funciona como debería.

Mi problema actual es este: quiero importar un archivo .css a .less que haga referencia a los estilos utilizados en el archivo .css de la siguiente manera:

@import "../style.css";

.small {
    font-size:60%;
    .type;
}
// other styles here

El archivo .css contiene una clase llamada .typepero cuando trato de compilar el archivo .less obtengo el errorNameError: .type is undefined

¿El archivo .less no importará archivos .css, solo otros archivos .less ...? ¿O estoy haciendo referencia equivocada ...?

Puede forzar que un archivo se interprete como un tipo particular especificando una opción, por ejemplo:

@import (css) "lib";

saldrá

@import "lib";

y

@import (less) "lib.css";

importará el lib.cssarchivo y lo tratará como menos. Si especifica que un archivo es menor y no incluye una extensión, no se agregará ninguno.

Si desea que su CSS se copie en la salida sin procesarse, puede usar la (inline)directiva . p.ej,

@import (inline) '../timepicker/jquery.ui.timepicker.css';

Tuve que usar lo siguiente con la versión 1.7.4

@import (less) "foo.css"

Sé que la respuesta aceptada es @import (css) "foo.css"pero no funcionó. Si desea reutilizar su clase css en su nuevo archivo less, debe usar (less)y no (css).

Revisa la documentación .

Cambie la extensión del archivo css a .less. No necesitas escribir MENOS en ella; todo CSS es válido MENOS (excepto las cosas de MS de las que tienes que escapar, pero ese es otro problema).

Según la respuesta de Fractalf, esto se corrige en v1.4.0

Desde el sitio web LESS :

Si desea importar un archivo CSS y no quiere que LESS lo procese, simplemente use la extensión .css:

@import "lib.css"; La directiva se dejará tal cual y terminará en la salida CSS.

Como jitbit señala en los comentarios a continuación, esto realmente solo es útil para fines de desarrollo, ya que no querría tener un @importancho de banda precioso que consume innecesariamente .

Prueba esto :

@import "lib.css";

De la documentación oficial:

Puede importar css y menos archivos. Solo se procesan menos declaraciones de importación de archivos, las declaraciones de importación de archivos css se mantienen como están. Si desea importar un archivo CSS y no quiere que LESS lo procese, simplemente use la extensión .css:

Fuente: http://lesscss.org/

Si solo desea importar un archivo CSS como referencia (por ejemplo, para usar las clases en Mixins) pero no incluye el archivo CSS completo en el resultado, puede usar @import (less,reference) "reference.css";:

my.less

 @import (less,reference) "reference.css";
 .my-class{
     background-color:black;
     .reference-class;
     color:blue;
 }

referencia.css

.reference-class{
    border: 1px solid red;
}

* Resultado (my.css) con lessc my.less out/my.css*

.my-class {
  background-color: black;
  border: 1px solid red;
  color: blue;
}

Estoy usando lessc 2.5.3

Si desea importar un archivo CSS que debe tratarse como menos, use esta línea:

.ie {
  @import (less) 'ie.css';
}

desde 1.5.0 puede usar la palabra clave 'en línea'.

Ejemplo: @import (en línea) "not-less-compatible.css";

Lo usará cuando un archivo CSS no sea menos compatible; Esto se debe a que aunque Less admite la mayoría de los estándares CSS conocidos, no admite comentarios en algunos lugares y no admite todos los hacks CSS conocidos sin modificar el CSS. Por lo tanto, puede usar esto para incluir el archivo en la salida para que todos los CSS estén en un archivo.

(fuente: http://lesscss.org/features/#import-directives-feature )