将less和css文件捆绑在一起答案

【问题标题】：Bundling less and css files together将less和css文件捆绑在一起
【发布时间】：2012-09-30 11:17:26
【问题描述】：

我觉得应该使用捆绑来将您一起使用的一堆文件组合成一个单一的交付给浏览器。这意味着例如对于我的根风格，我想做如下的事情：

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

但这似乎不适用于custom transform technique for bundling less files，因为它看起来像是在将所有文件传递给 LessTransform 之前将所有文件预先捆绑到一个 css 文件中。据我所知，此方法仅在您将所有较少的文件捆绑在一起时才有效。

有没有办法让 bundle 允许在同一个 bundle 中同时使用 less 和 css 文件？

【问题讨论】：

我认为“StyleBundle”在您实例化它时已经注册了一个 CssMinify 转换器。在您发布的代码中，这意味着它将尝试在 less 转换器之前缩小 Less 文件。在添加较少的转换器之前使用普通的“捆绑”类型或清除转换列表。
@rmac 这听起来和正在发生的事情一模一样。我试一试。
抱歉，我最初考虑过这个。但我认为我在您提供的链接中检查了StyleBundle / Bundle 并排除了它。但是在查看博客时，我发现我错了。我怀疑也是这种情况。

标签： c# asp.net-mvc-4 less bundling-and-minification

【解决方案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 转换器使用某些东西来确保它解决任何依赖样式表的正确路径。

【讨论】：

【解决方案2】：

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

因此，将LessTransform 应用于您的引导 css 文件应该没有任何区别。

它仍然会将所有文件捆绑到一个 css 文件中以传递给浏览器。

在设计时可能只有性能问题。

仍然会产生正确的输出，并且缓存将防止任何运行时性能问题。

【讨论】：

这也是我的第一个想法（因为 less is 是 css 的超集），但是在它到达 less 转换以“破坏”捆绑包之前首先发生了一些事情您同时包含了 less 和 css 文件（但有趣的是，当您只有较少时）。

【解决方案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" 可以很好地为您解决问题。

【讨论】：

【解决方案4】：

我对此进行了更多研究，并尝试使用 Bundle 而不是 StyleBundle，但仍然存在问题。我认为这个问题特别与 bootstrap.css 文件有关，该文件具有一些不太喜欢的语法。

【讨论】：