將less和css文件捆綁在一起

Question

我覺得捆綁應該被用來將你一起使用的一堆文件分組到瀏覽器中。 這意味着例如我的root風格，我想做類似以下的事情：

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);    

但是， 對於捆綁較少文件的自定義轉換技術來說，這似乎並不能很好地工作，因為它看起來像將所有文件預先捆綁到單個css文件中，然后再將其傳遞給LessTransform。 據我所知，只有將所有較少的文件捆綁在一起時，此方法才有效。

有沒有辦法讓bundle在同一個bundle中允許less和css文件？

Answer 1

是的，你是對的，變換器在將所有CSS / LESS內容傳遞給轉換器之前將其連接起來。 也就是說，轉換器不應該阻塞LESS和CSS的存在，因為你總是可以在LESS樣式表中包含標准CSS。

問題似乎是您正在使用已經與變換器關聯的StyleBundle對象。 嘗試使用通用的Bundle就像我在配置中一樣，如下所示：

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);

至於你自己的答案，bootstrap.css文件的問題不是LESS轉換器不喜歡它，而是@imports的路徑問題，請確保你的LESS轉換器使用某些東西來確保它解析正確的路徑到任何依賴樣式表。

Answer 2

我相信所有的CSS都是有效的（但不是所有的LESS都是有效的CSS）

因此，將LessTransform應用於您的bootstrap css文件應該沒有任何區別。

它仍然會將所有文件捆綁到一個css文件中以傳遞給瀏覽器。

在設計時可能只存在性能問題。

仍將生成正確的輸出，緩存將阻止任何運行時性能問題。

Answer 3

我知道這是一個古老的帖子，但我注意到一些可能對某人有用的奇怪......

我發現當包含較少的文件時， Bundle對象不喜歡css文件名中的連字符。 即：

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"
            );

對我不起作用，但以下情況（更改為jqueryui文件名）：

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"
            );

因此，將文件名從"~/Content/bootstrap-responsive.css"更改為"~/Content/bootstrapresponsive.css"可以很好地為您排序問題。

Answer 4

我對此有了更深入的了解並嘗試使用Bundle而不是StyleBundle，但仍然存在問題。 我認為這個問題特別與bootstrap.css文件有關，該文件有一些不太喜歡的語法。