捆绑少和CSS文件一起(Bundling less and css files together)

2019-09-23 06:06发布

我觉得应该对成组的一帮您使用连成一个单一的交付给浏览器的文件捆绑。 这意味着例如,对于我的根的风格,我想这样做的以下内容:

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之前。 从我可以告诉这个方法只有当你捆绑所有的减档一起工作。

有没有办法让束,允许在同一个包既少和css文件?

Answer 1:

是的,你是对的,变压器将其传递到转换器之前串接所有的CSS /更少内容。 这就是说,该转换器不应该因噎废食均不及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文件中的问题不在于少变压器不喜欢它,但可能是@imports的路径问题,请确保您的LESS变压器使用的东西,以确保其解决的正确路径在任何依赖样式表。



Answer 2:

我相信所有的CSS是有效的LESS(但不是全部LESS是有效的CSS)

所以具有LessTransform应用到您的引导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:

我有更多的有点看的到这一点,并使用捆绑,而不是试图StyleBundle但仍有问题。 我认为这个问题是特别是与有一些语法,少不喜欢bootstrap.css文件来完成。



文章来源: Bundling less and css files together