Запуск Autoprefixer с BundleTransformer/LESS в режиме отладки

Question

Итак, я использую BundleTransformer, LESS и пытаюсь добавить почтовый процессор Autoprefixer. Этот плагин автоматически принимает 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?

Если нет, это кажется бессмысленным для меня, потому что единственная альтернатива, которую я вижу, - это запросить непосредственно виртуальный URL 'Content/css/lessbundle, который будет запущен через Autoprefixer. Он будет только уменьшен для сборки релиза.

Answer 1

В документации (разделы: “Examples of usage”, “Debugging HTTP-handlers” и “Postprocessors”) описано, как решить эту проблему. Я перечислю основные шаги:

1. Для отладки HTTP-обработчики Используйте параметры конфигурации из пучков необходимо добавить в RegisterBundles метод App_Start/BundleConfig.cs файл следующий код:

   BundleResolver.Current = новый CustomBundleResolver();

2. Для того, чтобы эти настройки могут быть применены к CSS- и JS-активы необходимо зарегистрировать отладки HTTP-обработчики CssAssetHandler и JsAssetHandler в файле Web.config. Для этого в режиме IIS Integrated, то вам нужно добавить к /configuration/system.webServer/handlers элемента следующий код: "* CSS"

   < добавить имя = "CssAssetHandler" путь = глагол = "GET" типа = "BundleTransformer. Core.HttpHandlers.CssAssetHandler, BundleTransformer.Core " ResourceType = "Файл" Precondition = ""/ >

   < добавить имя = "JsAssetHandler" путь = "*. JS" глагол = "GET" тип =" Связанные ресурсыCore» ResourceType =„Файл“Precondition =„“/ >

3. Чтобы AutoprefixCssPostProcessor является одним из стандартных CSS-постпроцессоров с, необходимо внести изменения в файл Web.config. В атрибут \configuration\bundleTransformer\core\css элемента defaultPostProcessors должен быть добавить AutoprefixCssPostProcessor в конец списка разделенных запятыми (например, defaultPostProcessors="UrlRewritingCssPostProcessor,AutoprefixCssPostProcessor").

Answer 2

в дополнение к тому, что @Taritsyn сказал, что вы должны убедиться, что ваши пучки

CustomScriptBundle() и не ScriptBundle()

Если вы не получите сообщение немного запутанным об ошибке:

Не удалось найти трансформатор в '~/Content/CSS/myCssBundle' расслоению.

---

Я нашел, что это интересно посмотреть глубже, как это на самом деле работает

HTML, написано (только просматривать источник) с дополнительным параметром ?bundleVirtualPath

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

Это перехватывается обработчик в web.config, когда запрашивается файл .less, и обработчик затем может использовать это имя пакета для поиска любых преобразований, которые вы установили, в том числе в этом случае t он по умолчанию обрабатывает пост для AutoprefixCss.