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。
transformer类实现了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();
问题
有人对这两个错误有什么见解吗?知道什么解决方案吗?对我来说,这两件事都没有意义。谢谢。
发布于 2012-09-29 09:24:36
哇!为了找到问题的根源,这需要大量的跳跃。
解决这类问题的一个好策略是将各层剥离到最简单的情况。您没有看到任何错误消息,因为捆绑过程中的某些东西正在消耗dotless的日志记录消息,这些消息应该单独处理。这里假设您已经打开了dotless错误日志记录。
而不是使用:
@Styles.Render(“~/捆绑包/样式/引导”)
使用
<link rel="stylesheet/less" href="~/Content/style/bootstrap.less" type="text/css" />
当您尝试在浏览器中查看less文件时,应该会收到以下消息:
文件‘/Content/Themes/
/Mixins.less’中第253行的引导指令块具有无法识别的格式:
252: // webkit 253的多重阴影解决方案:@ http://toekneestuck.com/blog/2012/05/15/less-css-arguments-variable/:~"@{arguments}".replace(/[\[\]]|\,\sX/g, '')
;--^ 254:-webkit-box- shadow:@props;
这个问题的根源是bootstrap中的一次黑客攻击,它不能很好地使用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-29 07:39:02
场景1(已解决)
事实证明,它实际上并不是在'reset.less‘上失败,而是在'bootstrap.less’上,它的第一行是一个到‘set.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(仍处于中断状态)
请参阅上面Joel的答案。这是正确的。需要注意的一件事是,这个Tony Stark hack即将从Bootstrap 2.1.2中删除:https://github.com/twitter/bootstrap/issues/5079
https://stackoverflow.com/questions/12646603
复制相似问题