importar arquivo .css para o arquivo .less

Você pode importar arquivos .css para arquivos .less ...?

Estou familiarizado com menos e o uso para todo o meu desenvolvimento. Eu uso regularmente uma estrutura da seguinte maneira:

@import "normalize";

//styles here

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

Todas as importações são outros arquivos .less e funcionam como deveriam.

Meu problema atual é o seguinte: desejo importar um arquivo .css para .less que faça referência aos estilos usados ​​no arquivo .css da seguinte maneira:

@import "../style.css";

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

O arquivo .css contém uma classe chamada .type mas quando tento compilar o arquivo .less, recebo o erroNameError: .type is undefined

O arquivo .less não importará arquivos .css, apenas outros .less ...? Ou estou referenciando errado ...?!

Você pode forçar um arquivo a ser interpretado como um tipo específico especificando uma opção, por exemplo:

@import (css) "lib";

irá produzir

@import "lib";

e

@import (less) "lib.css";

importará o lib.cssarquivo e o tratará como menos. Se você especificar um arquivo como menor e não incluir uma extensão, nenhum será adicionado.

Se você deseja que seu CSS seja copiado na saída sem ser processado, use a (inline)diretiva . por exemplo,

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

Eu tive que usar o seguinte na versão 1.7.4

@import (less) "foo.css"

Eu sei que a resposta aceita é, @import (css) "foo.css"mas não funcionou. Se você deseja reutilizar sua classe css no seu novo arquivo menor, é necessário usar(less) e não (css).

Verifique a documentação .

Mude a extensão do arquivo css para .less. Você não precisa escrever MENOS nele; todo o CSS é MENOS válido (exceto os itens de MS dos quais você precisa escapar, mas isso é outro problema.)

Pela resposta da Fractalf, isso está corrigido na v1.4.0

No site da LESS :

Se você deseja importar um arquivo CSS e não deseja que LESS o processe, basta usar a extensão .css:

@import "lib.css"; A diretiva será deixada como está e terminará na saída CSS.

Como o jitbit aponta nos comentários abaixo, isso é realmente útil apenas para fins de desenvolvimento, pois você não gostaria de ter um @importconsumo desnecessário de largura de banda preciosa.

Tente o seguinte:

@import "lib.css";

Da documentação oficial:

Você pode importar arquivos css e menos. Somente menos instruções de importação de arquivos são processadas, as instruções de importação de arquivo css são mantidas como estão. Se você deseja importar um arquivo CSS e não quer que o LESS o processe, use a extensão .css:

Fonte: http://lesscss.org/

Se você apenas deseja importar um arquivo CSS como referência (por exemplo, para usar as classes no Mixins), mas não incluir o arquivo CSS inteiro no resultado, você pode usar@import (less,reference) "reference.css"; :

my.less

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

reference.css

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

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

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

estou a usar lessc 2.5.3

Se você deseja importar um arquivo css que deve ser pisado com menos frequência, use esta linha:

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

desde a versão 1.5.0, você pode usar a palavra-chave 'inline'.

Exemplo: @import (inline) "not-less-compatible.css";

Você o usará quando um arquivo CSS não for menos compatível; Isso ocorre porque, embora o Less suporte a maioria dos padrões conhecidos de CSS, ele não suporta comentários em alguns lugares e não suporta todos os hacks de CSS conhecidos sem modificar o CSS. Portanto, você pode usar isso para incluir o arquivo na saída, para que todo o CSS esteja em um arquivo.

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