ASP.Net MVC4 + Bootstrap(LESS)+ dotLess。
目标是将Bootstrap .less
文件转换为.css
的单个捆绑包,并且我遇到了showstopper问题。
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()
,里面存在有问题的代码......这里有两个场景及其问题:
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.
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();
任何人都可以了解这些错误中的任何一个?了解任何解决方案对我来说都没有意义。感谢。
答案 0 :(得分:5)
哇!这是为了找到问题的根源而进行的大量跳跃。
解决此类问题的一个好策略是将图层剥离到最简单的情况。您没有看到任何错误消息,因为捆绑过程中的某些内容正在消耗无点的日志消息,应该单独处理。这假设您打开了无点错误日志记录。
相反,使用:
@ Styles.Render( “〜/束/风格/自举”)
使用
<link rel="stylesheet/less" href="~/Content/style/bootstrap.less" type="text/css" />
当您尝试在浏览器中查看较少的文件时,您应该收到以下消息:
指令块,文件中第253行的格式无法识别 '/Content/Themes/bootstrap/mixins.less':
[252]://多个阴影解决方案来自 http://toekneestuck.com/blog/2012/05/15/less-css-arguments-variable/ [253]:@ props:〜
"@{arguments}".replace(/[\[\]]|\,\sX/g, '')
; - ^ [254]: - webkit-box-shadow:@props;
这个问题的根源是由于无法使用无法正常运行的引导程序。要解决此问题,请在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;
}
希望这适合你。
答案 1 :(得分: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(仍然破碎)
见上面Joel的回答。它是正确的。有一点需要注意,这个Tony Stark hack将从Bootstrap 2.1.2中删除,就在附近:https://github.com/twitter/bootstrap/issues/5079