16

ASP.Net MVC4 + ブートストラップ (LESS) + dotLess。

目標は、Bootstrap.lessファイルを の単一のバンドルに変換することであり.css、ショーストッパーの問題に直面しています。

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);

赤いフラグの構文の問題がないはずの、ブートストラップの少ないファイルのみ。

LessTransform次のステップは、css を生成するためにそのトランスフォーマー クラスを構築することでした。

トランスフォーマー クラスは を実装し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();

質問

これらのエラーのいずれかについて洞察を持っている人はいますか? 解決策を知っていますか？どちらも私には意味がありません。ありがとう。

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;

この問題の原因は、ドットレスでうまく機能しないブートストラップのハックに起因します。この問題を解決するには、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」では失敗していませんでしたが、最初の行が「reset.less」へのインポートステートメントである「bootstrap.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 の回答を参照してください。正しいです。注意すべきことの 1 つは、この Tony Stark のハックがまもなく Bootstrap 2.1.2 から削除されることです: https://github.com/twitter/bootstrap/issues/5079

于 2012-09-28T23:39:01.757 に答える