Empacotamento menos e css, e arquivos juntos

Question

Eu me sinto como o empacotamento deve ser usado para agrupar um monte de arquivos que você usa juntos em uma única entrega para o navegador.Isso significaria, por exemplo, para a minha raiz estilo que eu gostaria de fazer algo como o seguinte:

var bundle = new StyleBundle("~/Content/style").Include(
    "~/Content/mystyle.less",
    "~/Content/bootstrap.css",
    "~/Content/bootstrap-responsive.css");
bundle.Transforms.Add(new LessTransform());
bundle.Transforms.Add(new CssMinify());
bundles.Add(bundle);    

Mas isso parece não funcionar muito bem com o transformação personalizada técnica para empacotamento menos arquivos como parece que a pré-agrupa todos os arquivos em um único arquivo css antes de passar para o LessTransform.Do que posso dizer, este método só funciona se reunir todos os seus menor arquivos juntos.

Existe uma maneira de obter os pacotes para permitir que ambos os menos e os arquivos css no mesmo pacote?

Answer 1

Eu tinha um pouco mais de um olhar para isso e tentou usar o Pacote em vez de StyleBundle mas ainda tinha problemas.Eu acho que o problema é especificamente para fazer com o bootstrap.arquivo css ter algum sintaxe menos que não gosta.

Answer 2

Sim, você está certo, o transformador concatena todos os CSS/MENOS conteúdo antes de passá-la adiante para o conversor.O que disse, o conversor não deve ser asfixia a presença de MENOS e CSS, como você pode sempre incluem o padrão CSS dentro de MENOS de folha de estilos.

O problema parece ser que você esteja usando um StyleBundle objeto que já tem um transformador associado.Tente usar um genérico Bundle como eu faço na minha config, como este:

var customStyles = new Bundle("~/bundle/style/css")
                       .Include("~/Content/normalize.css","~/Content/*.less");
bootstrapStyles.Transforms.Add(new LessTransform());
bootstrapStyles.Transforms.Add(new CssMinify());
bundles.Add(customStyles);

Como para a sua própria resposta abaixo, o problema com a inicialização.arquivo css não é que a MENOS do transformador não gostam disso, mas, provavelmente, um problema de caminho para @importações, certifique-se de que o seu MENOR transformador usa algo para garantir que ele resolve os caminhos adequados para a qualquer dependência de folhas de estilo.

Answer 3

Eu acredito que todas as CSS é válida MENOS (mas não todas, MENOS é válido CSS)

Assim, tendo o LessTransform aplicado ao seu bootstrap arquivos css não faz qualquer diferença.

Ele vai ainda reunir todos os arquivos em um arquivo css para entregar para o navegador.

Não pode ser apenas um desempenho problema durante a tempo de design.

A saída correta ainda vai ser produzido e o cache irá impedir qualquer tempo de execução problemas de desempenho.

Answer 4

Eu sei que isso é um pouco de um post antigo, mas eu tenho notado algo estranho, que pode ser do uso de alguém...

Descobri que Bundle o objeto não como hífens no nome do arquivo css quando menos arquivos também estão incluídos.i.e.:

var frontendStyles = new Bundle("~/bundles/frontend.main.css")
            .IncludeDirectory("~/Content/less", "*.less")
            .Include(
                "~/Content/ladda.css",
                "~/Content/jquery.mobile.custom.structure.min.css",
                "~/Content/jquery-ui.1.9.2.custom.css"
            );

Não funciona para mim, mas o seguinte (alteração jqueryui nome de arquivo):

var frontendStyles = new Bundle("~/bundles/frontend.main.css")
            .IncludeDirectory("~/Content/less", "*.less")
            .Include(
                "~/Content/ladda.css",
                "~/Content/jquery.mobile.custom.structure.min.css",
                "~/Content/jqueryui.1.9.2.custom.css"
            );

Portanto, alterar o nome do arquivo de "~/Content/bootstrap-responsive.css" para "~/Content/bootstrapresponsive.css" poderia muito bem classificar o problema para você.