在调试模式下使用BundleTransformer / LESS运行Autoprefixer

时间：2015-03-12 03:41:30

标签： asp.net less autoprefixer bundletransformer

所以我目前使用BundleTransformer，LESS，我试图添加Autoprefixer后期处理器。此插件会自动获取transform: scale(1.5)之类的CSS，并将其转换为-webkit-transform和-moz-transform。

如果我处于发布模式或BundleTable.EnableOptimizations=true，那么一切正常，前缀会按预期添加。

但是在调试模式下，我的包中的所有单个CSS / LESS文件都作为单独的请求存在于HTML中。我在我的CSHTML文件中使用此命令：

@Styles.Render("~/Content/css/lessbundle")

即。在调试模式下，这会扩展到LINK标签：

/cs/something.css
/css/lessfile1.less
/css/lessfile1.less

而不是单个文件

/Content/css/lessbundle?v=RFAUSIwb-jEuuo4vHNTnTkE2LrN2jfHglX-Hk8HIF481

对于LESS文件，IIS会自动转换它们，但它不会应用Autoprefixer。

在请求原始.css和.less文件时，有没有办法让Autoprefixer工作？

如果不是，那对我来说似乎毫无意义，因为我看到的唯一选择是直接请求'Content/css/lessbundle虚拟网址 - 它将通过Autoprefixer运行。它只会在发布版本中缩小。

2 个答案:

答案 0 :(得分：8)

在文档（部分：“Examples of usage”，“Debugging HTTP-handlers”和“Postprocessors”）中介绍了如何解决此问题。我将列出基本步骤：

  1. 为了调试HTTP处理程序以使用bundle中的配置设置，需要在RegisterBundles文件的App_Start/BundleConfig.cs方法中添加以下代码：

    BundleResolver.Current = new CustomBundleResolver（）;

  2. 为了将这些设置应用于CSS-和JS-assets，需要在Web.config文件中注册调试HTTP处理程序CssAssetHandler和JsAssetHandler。要在IIS集成模式下执行此操作，需要在/configuration/system.webServer/handlers元素中添加以下代码：

    ＆lt; add name =＆＃34; CssAssetHandler＆＃34;     路径=＆＃34; *。CSS＆＃34;动词=＆＃34; GET＆＃34;     type =＆＃34; BundleTransformer.Core.HttpHandlers.CssAssetHandler，BundleTransformer.Core＆＃34;     = resourceType为＆＃34;文件＆＃34;前提=＆＃34;＆＃34; /＆GT;

    ＆lt; add name =＆＃34; JsAssetHandler＆＃34;     路径=＆＃34; * JS＆＃34;动词=＆＃34; GET＆＃34;     type =＆＃34; BundleTransformer.Core.HttpHandlers.JsAssetHandler，BundleTransformer.Core＆＃34;     = resourceType为＆＃34;文件＆＃34;前提=＆＃34;＆＃34; /＆GT;

  3. 要使AutoprefixCssPostProcessor是默认的CSS后处理器之一，您需要更改Web.config文件。在defaultPostProcessors元素的\configuration\bundleTransformer\core\css属性中，必须将AutoprefixCssPostProcessor添加到逗号分隔列表的末尾（例如，defaultPostProcessors="UrlRewritingCssPostProcessor,AutoprefixCssPostProcessor"）。

答案 1 :(得分：0)

除了@Taritsyn所说的你需要确保你的捆绑包

CustomScriptBundle()而非ScriptBundle()

如果不是，您将收到稍有混淆的错误消息：

  

无法在'〜/ Content / css / myCssBundle'包中找到变压器。

我发现有趣地深入了解这实际上是如何运作的

使用附加参数?bundleVirtualPath

编写HTML（仅查看源代码） 
/Content/css/defenderrazor_DEBUG.less?
bundleVirtualPath=~%2fContent%2fcss%2fmyCssBundle

当请求.less文件时，web.config中的处理程序拦截了这个，然后处理程序可以使用该包名来查找您设置的任何转换 - 包括在这种情况下AutoprefixCss的默认发布处理器。

相关问题
最新问题