2017-05-16 10 views
0

AngularJS関数でHTML経由でLESSの変数をオンザフライで変更しようとしています。私は同じコードを書いてxampで動かしました。シンプルなHTML、CSSで動作します。今私は、Visual Studioでエンタープライズアプリケーションに同じコードを入れて、それは動作しません。変数compileは機能します。ただ、less.modifyVarsは機能しませんし、その場で変化しません。これは私のHTMLは、身体less.modifyVarsはVisual Studioで機能しませんか?

<form ng-submit="changeLess()"> 
       Enter text and hit enter to change color: 
       <input type="text" ng-model="text" name="text" /> 
       <input type="submit" id="submit" value="Submit" /> 
      </form> 

私の小さいファイルで

<link rel="stylesheet/less" href="~/Content/brandnew.less"> 
<script> 
var less = { 
    logLevel: 0, 
    env: "development" 
}; 
</script> 
<script src="~/Content/less.min.js"></script> 

をどのように見えるかです。

@color: #f16e8d; 
.custom-anchor-color { 
    color: @color; 
} 

私のJS機能です。これはまったく同じ機能で、私は自分のlocalhostで走った。しかし、それはVSで動作しません。

$scope.changeLess = function() { 
      if ($scope.text) { 
       debugger; 
       less.modifyVars({ 
        color: $scope.text 
       }); 
       console.log($scope.text + ' inside $scope.text') 
      } 
     } 

機能を正しく記録していますが、変数の色は変更されません。私は引用と一緒に '色'としてそれを維持しようとしました。

+0

Visual Studioでless.jsのバージョンが使用されていますか? –

答えて

0

はこれを試してみてください。

less.modifyVars({ 
    '@color': $scope.text 
}); 
1

私はバグを発見しました。アプリはすでにコードを事前にレンダリングしていたため、レンダリングされたため、LESSファイルに変数が残っていませんでした。これは、ドットなしでVSで可能です。これはコードがそれを探す方法です。

<httpHandlers> 
     <add path="*.less" verb="GET" type="dotless.Core.LessCssHttpHandler, dotless.Core" /> 
    </httpHandlers> 

詳細はこちらをご覧ください。 http://www.dotlesscss.org/

関連する問題