运行 在调试模式下使用 BundleTransformer/LESS 的自动前缀

Running Autoprefixer with BundleTransformer / LESS in Debug mode

所以我目前使用 BundleTransformer、LESS 并且我正在尝试添加 Autoprefixer post 处理器。此插件自动将 css 像 transform: scale(1.5) 一样转换为 -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。

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

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

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

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

    BundleResolver.Current = new CustomBundleResolver();

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

    <添加名称="CssAssetHandler" path="*.css" verb="GET" 类型="BundleTransformer.Core.HttpHandlers.CssAssetHandler, BundleTransformer.Core" resourceType="File" preCondition="" />

    <添加名称="JsAssetHandler" path="*.js" 动词="GET" 类型="BundleTransformer.Core.HttpHandlers.JsAssetHandler, BundleTransformer.Core" resourceType="File" preCondition="" />

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

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

CustomScriptBundle() 而不是 ScriptBundle()

否则您会收到稍微令人困惑的错误消息：

Could not find the transformer in the '~/Content/css/myCssBundle' bundle.

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

HTML 是用附加参数 ?bundleVirtualPath

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

当请求 .less 文件时，这会被 web.config 中的处理程序拦截，然后处理程序能够使用该包名称来查找您设置的任何转换 - 包括在此AutoprefixCss.

的默认 post 处理器