MVC Bundling разбивает мои инструкции CSS CSS, удаляя пробелы?

У меня есть инструкции css, подобные этому:

margin-left: calc(50% - 480px);

Какая работа прекращена, но как только я начну минифицировать, утверждение изменится на:

margin-left: calc(50%- 480px);

Отказ от всех выписок. Подобные вещи случаются с шириной, максимальной шириной, минимальной шириной и т.д. Можно ли каким-либо образом изменить поведение пакета, чтобы оставить эти свойства CSS в одиночку?

В настоящее время я просто использую bundles.Add(new Bundle()), чтобы предотвратить полностью исключение, но было бы неплохо, если бы я мог правильно просчитать.

Ответ 1

Это проблема оптимизатора.

Чтобы избежать того, чтобы miniffier удалил пробелы, сгруппируйте затронутый элемент с помощью скобок. Это обсуждает проблему.

margin-left: calc((50%) - 480px);

Ответ 2

В дополнение к ответу выше: если вы используете:

margin-left: calc((50%) + 480px);

Вы должны переписать его как:

margin-left: calc((50%) - -480px);

Так как для меня это не исправляло (50%) +.

Ответ 3

Если мини-код css по умолчанию не выполняет то, что вам нужно, вы всегда можете использовать сторонний.

позволяет вам использовать свои собственные преобразования с помощью IBundleTransform

var bundle = new Bundle("~/Content/css", myCustomCssTransform);

существует много разных пучков - nuget

Например, вы можете использовать компрессор YUI:

    using System.IO;
using System.Web.Optimization;
using Yahoo.Yui.Compressor;

namespace Bundler.Utilities
{
 public enum contentType
 {
  javascript,
  css
 }

 public class YUITransform : IBundleTransform
 {

  readonly string _contentType = string.Empty;

  public YUITransform(contentType contentType)
  {
   if (contentType == contentType.css)
   {
    this._contentType = "text/css";
   }
   else
   {
    this._contentType = "text/javascript";
   }
  }

  public void Process(BundleContext context, BundleResponse bundle)
  {
   bundle.ContentType = this._contentType;

   string content = string.Empty;


   foreach (FileInfo file in bundle.Files)
   {

    using (StreamReader fileReader = new
StreamReader(file.FullName)) {
     content += fileReader.ReadToEnd();
     fileReader.Close();
    }

   }

   bundle.Content = Compress(content);
  }

  string Compress(string content) {

   if (_contentType == "text/javascript")
   {
     return JavaScriptCompressor.Compress(content);
   }
   else
   {
    return CssCompressor.Compress(content,
                           CssCompressionType.StockYuiCompressor
);
   }
  }
 }
}

Ответ 4

Это абсолютно нормально, ссылаясь на CSS-значения и модуль модулей, в котором говорится

Следующие функции подвержены риску и могут быть удалены во время CR period: 'calc(),' toggle(), 'attr(). "

Если вы могли бы пропустить пробелы, это не было бы полным сокращением. Опция заменяет пробелы символом unicode \00A0

Ответ 5

Не знаю, почему, но calc ((50%) - 480px) не работал у меня, однако следующее работало:

Вычитание:

margin-left: calc(((100%) - (480px)))

дополнение:

margin-left: calc((100%) - -480px)

Ответ 6

Остерегайтесь использования переменных в calc. Вы можете получить еще одну ошибку CssMinify():

@myVariable: 0em;
margin-left: calc((50%) - @myVariable);

сжимается, и устройство обрезается:

margin-left: calc((50%) - 0);

, и это также неверный вызов calc()!