I attempted to dynamically change the LESS variable using HTML within an AngularJS function. The code worked fine on XAMPP with simple HTML and CSS, but when I transferred it to an enterprise app in Visual Studio, it stopped functioning properly. While the variables compiled and the function ran smoothly, the less.modifyVars did not work as expected, failing to update on the fly. Here is a snippet of my HTML structure:
<link rel="stylesheet/less" href="~/Content/brandnew.less">
<script>
var less = {
logLevel: 0,
env: "development"
};
</script>
<script src="~/Content/less.min.js"></script>
Within the body:
<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>
This is the content of my less file:
@color: #f16e8d;
.custom-anchor-color {
color: @color;
}
And here is my JavaScript function that seems to be causing issues specifically in Visual Studio:
$scope.changeLess = function() {
if ($scope.text) {
debugger;
less.modifyVars({
color: $scope.text
});
console.log($scope.text + ' inside $scope.text')
}
}
The function itself logs correctly, yet the color variable fails to update. I even tried keeping it as 'color' (with or without quotations), but encountered the same issue.