无点引擎解析器返回空字符串

Question

ASP.Net MVC4 + Bootstrap(LESS)+ dotLess.

目标是将Bootstrap .less文件转换为单个捆绑包.css,并且我遇到了showstopper问题.

Bundle.config

var bootstrapStyles = new Bundle("~/bundle/style/bootstrap").Include("~/Content/less/*.less");
bootstrapStyles.Transforms.Add(new LessTransform());
bootstrapStyles.Transforms.Add(new CssMinify());
bundles.Add(bootstrapStyles);

只有bootstrap的文件较少,不应该有任何红旗语法问题.

下一步是构建该变换器类LessTransform以生成css.

变换器类实现了Process()内部存在的问题代码......这里是两个场景及其问题:

场景1:静态 Less.Parse()

var parsedLess = Less.Parse(bundle.Content);
bundle.Content = parsedLess;

// Throws a FileNotFoundException
// "You are importing a file ending in .less that cannot be found."
// reset.less and it definitely exists in that folder. 

场景2:LessEngine.TransformToCss()

var content = new StringBuilder();
var engine = new LessEngine();

foreach (var file in bundle.Files)
{
    // text is extracted correctly.
    var text = File.ReadAllText(file.FullName);
    // transform function returns an empty string, no errors
    var css = engine.TransformToCss(text, file.FullName);
    content.AppendLine(css);
}
bundle.Content = content.ToString();

题

任何人都可以了解这些错误中的任何一个？了解任何解决方案 对我来说都没有意义.谢谢.

Answer 1

哇!这是为了找到问题的根源而进行的大量跳跃.

解决此类问题的一个好策略是将层剥离到最简单的情况.您没有看到任何错误消息,因为捆绑过程中的某些内容正在消耗无点的日志消息,应该单独处理.这假设您打开了无点错误日志记录.

相反,使用:

@ Styles.Render( "〜/包/风格/引导")

使用

<link rel="stylesheet/less" href="~/Content/style/bootstrap.less" type="text/css" />

当您尝试在浏览器中查看较少的文件时,您应该收到以下消息:

文件'/Content/Themes/bootstrap/mixins.less'中第253行的无法识别格式的指令块:

[252]://来自http://toekneestuck.com/blog/2012/05/15/less-css-arguments-variable/ [253]的多影子解决方案 :@props:〜"@{arguments}".replace(/[\[\]]|\,\sX/g, ''); - ^ [254]: - webkit-box-shadow:@props;

这个问题的根源归因于bootstrap中的hack与无点无关.要解决此问题,请在mixins.less中替换以下行:

// Drop shadows
.box-shadow(@shadowA, @shadowB:X, ...){
  // Multiple shadow solution from http://toekneestuck.com/blog/2012/05/15/less-css-arguments-variable/
  @props: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`;
  -webkit-box-shadow: @props;
     -moz-box-shadow: @props;
          box-shadow: @props;
}

使用以下行:

// Drop shadows
.box-shadow(@shadow){
  -webkit-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
          box-shadow: @shadow;
}
.box-shadow(@shadow1, @shadow2) {
  -webkit-box-shadow: @shadow1, @shadow2;
     -moz-box-shadow: @shadow1, @shadow2;
          box-shadow: @shadow1, @shadow2;
}
.box-shadow(@shadow1, @shadow2, @shadow3) {
  -webkit-box-shadow: @shadow1, @shadow2, @shadow3;
     -moz-box-shadow: @shadow1, @shadow2, @shadow3;
          box-shadow: @shadow1, @shadow2, @shadow3;
}

希望这对你有用.