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

【问题标题】：Running Autoprefixer with BundleTransformer / LESS in Debug mode在调试模式下使用 BundleTransformer / LESS 运行 Autoprefixer
【发布时间】：2015-03-12 03:41:29
【问题描述】：

所以我目前使用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 虚拟 URL - 这将通过 Autoprefixer 运行。它只会在发布版本中被缩小。

【问题讨论】：

标签： asp.net less autoprefixer bundletransformer

【解决方案1】：

在文档中（章节：“Examples of usage”、“Debugging HTTP-handlers” 和 “Postprocessors”）描述了如何解决这个问题。我将列出基本步骤：

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

BundleResolver.Current = new CustomBundleResolver();
为了将这些设置应用到 CSS- 和 JS-assets 需要在 Web.config 文件中注册调试 HTTP-handlers CssAssetHandler 和 JsAssetHandler。要在 IIS 集成模式下执行此操作，您需要在 /configuration/system.webServer/handlers 元素中添加以下代码：
要使 AutoprefixCssPostProcessor 成为默认 CSS 后处理器之一，您需要更改 Web.config 文件。在\configuration\bundleTransformer\core\css 元素的defaultPostProcessors 属性中，必须将AutoprefixCssPostProcessor 添加到逗号分隔列表的末尾（例如defaultPostProcessors="UrlRewritingCssPostProcessor,AutoprefixCssPostProcessor"）。

【讨论】：

感谢您的回复！ :D

【解决方案2】：

除了@Taritsyn 所说的之外，您还需要确保您的捆绑包是

CustomScriptBundle() 而不是ScriptBundle()

如果不是，您将收到稍微令人困惑的错误消息：

在“~/Content/css/myCssBundle”包中找不到转换器。

我发现深入研究它的实际工作原理很有趣

HTML 是使用附加参数?bundleVirtualPath 编写的（仅查看源代码）

/Content/css/defenderrazor_DEBUG.less?
bundleVirtualPath=~%2fContent%2fcss%2fmyCssBundle

当请求 .less 文件时，web.config 中的处理程序会截获此信息，然后处理程序能够使用该包名称来查找您设置的任何转换 - 在这种情况下包括默认帖子AutoprefixCss 的处理器。

【讨论】：