16

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

目标是将 Bootstrap.less文件转换为一个单独的.css.

捆绑配置

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 的 less 文件，不应该有任何红旗语法问题。

下一步是构建该转换器类LessTransform以生成 css。

转换器类实现了Process()内部存在问题的代码......这是两种情况及其问题：

场景一：静态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();

问题

有人对这些错误中的任何一个有见解吗？知道任何解决方案吗？对我来说都没有意义。谢谢。

4

2 回答 2

5

哇！要想找到问题的根源，需要进行大量的跳跃。

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

相反，使用：

@Styles.Render("~/bundle/style/bootstrap")

采用

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

当您尝试在浏览器中查看 less 文件时，您应该收到以下消息：

文件“/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；

这个问题的根源在于引导程序中的一个 hack，它不能很好地与 dotless 配合使用。要解决此问题，请替换 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;
}

希望这对你有用。

于 2012-09-29T01:24:36.223 回答
1

场景 1（已解决）

事实证明，它实际上并没有在“reset.less”上失败，而是在“bootstrap.less”上，第一行是“reset.less”的导入语句。在循环中实施路径解析器解决了该问题。

// let them throw exceptions on casting because they should never be null.
var importer = (Importer)lessParser.Importer;
var filereader = (FileReader)importer.FileReader;
// "As" casting here ensures if the path resolver is another type that we cannot cast 
// (ex. RelativePathResolver) that we get a null rather than an exception.
var pathresolver = filereader.PathResolver as ImportedFilePathResolver;
if (pathresolver != null)
    pathresolver.CurrentFilePath = currentFilePath;
else
    filereader.PathResolver = new ImportedFilePathResolver(currentFilePath);

场景 2（仍然破碎）

请参阅上面乔尔的回答。它是正确的。需要注意的一点是，这个 Tony Stark hack 将从 Bootstrap 2.1.2 中删除，指日可待：https ://github.com/twitter/bootstrap/issues/5079

于 2012-09-28T23:39:01.757 回答