ASP.Net MVC4引导(LESS)dotLess.
目标是将无引导文件转换成单个.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：Static 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();
题
解决方法
哇！这是一个很大的跳跃,找到问题的根源.
这样的问题的一个很好的策略是将层剥离到最简单的情况.您没有看到任何错误消息,因为捆绑过程中的某些东西正在吞噬dotless的日志消息,应单独处理.这假设您已经打开了无点错误日志记录.
相反,使用：
@ Styles.Render( “〜/包/风格/引导”)
使用
<link rel="stylesheet/less" href="~/Content/style/bootstrap.less" type="text/css" />
当您尝试在浏览器中查看较少的文件时,应该会收到以下消息：
directive block with unrecognised format on line 253 in file
‘/Content/Themes/bootstrap/mixins.less’:[252]: // Multiple shadow solution from
07000
[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(/[\[\]]|\,'')`; -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,@shadow3; -moz-Box-shadow: @shadow1,@shadow3; Box-shadow: @shadow1,@shadow3; }
希望这适合你.
