MVC 捆绑通过删除空格来破坏我的 calc CSS 语句？答案

【问题标题】：MVC Bundling breaking my calc CSS statements by removing spaces?MVC 捆绑通过删除空格来破坏我的 calc CSS 语句？
【发布时间】：2014-01-02 17:13:24
【问题描述】：

我有这样的css语句：

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

在未缩小的情况下可以正常工作，但一旦我开始缩小，语句就会更改为：

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

渲染所有 calc 语句被破坏。宽度、最大宽度、最小宽度等也会发生类似的情况。有什么办法可以改变捆绑包的行为以不理会这些 CSS 属性？

目前我只是使用bundles.Add(new Bundle()) 来完全防止缩小，但如果我能正确缩小就好了。

【问题讨论】：

您是否在Web.config 中设置了<compilation debug="false" /> 或在BundleConfig.cs 中设置了BundleTable.EnableOptimizations = true;？
@JohnH - 第一个同意，第二个不同意
@RobVious calc 在我的中工作得很好。尝试更新到最新的 Web Grease
既然它是一个新的 CSS 功能，并不是所有浏览器都实现了，为什么不把这种 CSS 放在单独的文件中，将它命名为 *.calc.css 并将这个异常添加到 BundleCollection.IgnoreList 属性在 BundleConfig.cs
计算功能仍处于候选人推荐期。因此微软没有将它包含在它的捆绑中。您可以查看此相关帖子以获取更多信息和建议：stackoverflow.com/questions/19361403/…

标签： asp.net-mvc asp.net-mvc-3 asp.net-mvc-4 bundling-and-minification

【解决方案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 Values and Units Module 表示这是完全正常的

以下功能存在风险，可能会在 CR 期间被删除句号：‘calc()’、‘toggle()’、‘attr()’。”

如果你可以跳过那里的空格，那将不是一个完整的缩小。一个选项是用 unicode 字符替换空格 \00A0

【讨论】：

【解决方案5】：

不知道为什么，但是 calc((50%) - 480px) 对我不起作用，但是以下方法起作用了：

减法：

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

补充：

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

【讨论】：

【解决方案6】：

注意在计算中使用变量。您可能会遇到另一个 CssMinify() 错误：

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

被压缩，单位被切断：

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

这也是无效的 calc() 调用！

【讨论】：

【解决方案7】：

YUI Compressor 的 2.4.9 版本似乎已经修复了这个问题，可以从这里访问 https://mvnrepository.com/artifact/com.yahoo.platform.yui/yuicompressor?repo=bsi-business-systems-integration-ag-scout。我用过这个css文件：

body{
    font-size: calc(50% - 3px);
    font-size: calc(50% + 3px);
    font-size: calc(50% + +3px);
    font-size: calc((50%) + (3px));
    font-size: calc(50% + (+3px));
    font-size: calc(50% + (3px));
    font-size: calc(50% - (-3px));
    font-size: calc(50% - -3px);
}

并运行此命令：

java -jar yuicompressor-2.4.9-BSI-2.jar --line-break 0 -o process.css.min.gz file.css

生成这个输出，看起来不错：

body{font-size:calc(50% - 3px);font-size:calc(50% + 3px);font-size:calc(50% + +3px);font-size:calc((50%)+(3px));font-size:calc(50% + (+3px));font-size:calc(50% + (3px));font-size:calc(50% - (-3px));font-size:calc(50% - -3px)}

【讨论】：