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.
场景二: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();
问题
有人了解这些错误中的任何一个吗?知道任何解决方案吗?对我来说都没有意义。谢谢。
最佳答案
哇!要找到问题的根源,需要进行大量的跳跃。
解决此类问题的一个好策略是将层剥离到最简单的情况。您没有看到任何错误消息,因为捆绑过程中的某些东西正在消耗 dotless 的日志消息,这些消息应该单独处理。这假设您已打开无点错误记录。
而不是使用:
@Styles.Render("~/bundle/style/bootstrap")
使用
<link rel="stylesheet/less" href="~/Content/style/bootstrap.less" type="text/css" />
当您尝试在浏览器中查看 less 文件时,您应该会收到以下消息:
directive block with unrecognised format on line 253 in file '/Content/Themes/bootstrap/mixins.less':
[252]: // Multiple shadow solution from http://toekneestuck.com/blog/2012/05/15/less-css-arguments-variable/ [253]: @props: ~
"@{arguments}".replace(/[\[\]]|\,\sX/g, '')
; --^ [254]: -webkit-box-shadow: @props;
此问题的根源归因于 bootstrap 中的 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;
}
希望这对你有用。
关于css - 无点引擎解析器返回空字符串,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12646603/