asp.net - 在 Debug模式下使用 BundleTransformer/LESS 运行 Autoprefixer

Question

所以我目前使用 BundleTransformer、LESS 并且我正在尝试添加 Autoprefixer 后处理器。该插件自动采用 transform:scale(1.5) 等 css 并将其转换为 -webkit-transform 和 -moz-transform。

如果我处于 Release模式或具有BundleTable.EnableOptimizations=true，那么一切都会正常工作，并且前缀会按预期添加。

但是，在 Debug模式下，我的包中的所有单独 CSS/LESS 文件都作为单独的请求出现在 HTML 中。我在我的 CSHTML 文件中使用此命令:

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

即在 Debug模式下，这会扩展到 LINK 标记:

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

而不是单个文件

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

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

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

如果不是，这对我来说似乎毫无意义，因为我看到的唯一替代方案是直接请求 'Content/css/lessbundle 虚拟 URL - 它将通过 Autoprefixer< 运行。它只会针对发布版本进行缩小。

Answer 1

在文档(部分: “Examples of usage” 、 “Debugging HTTP-handlers” 和 “Postprocessors” )中描述了如何解决此问题。我将列出基本步骤:

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

   BundleResolver.Current = new CustomBundleResolver();

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

   <添加名称=“CssAssetHandler” 路径=“*.css”动词=“GET” 类型=“BundleTransformer.Core.HttpHandlers.CssAssetHandler，BundleTransformer.Core” resourceType="文件"preCondition=""/>

   <添加名称=“JsAssetHandler” 路径=“*.js”动词=“GET” 类型=“BundleTransformer.Core.HttpHandlers.JsAssetHandler，BundleTransformer.Core” resourceType="文件"preCondition=""/>

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