I am trying to use Less in my angular 13 project, but the less.modifyVars does not seem to update the variables as defined in the less files?
I get this information message "Less has finished and no sheets were loaded." for each of the less file that I have in my project, not sure if it's related to the issue though.
Please see below my implementation.
I have installed less(call npm install --save-dev and npm install --save-dev -g) both globally and locally but none worked.
The paths to my less files in angular.json file is as follows, please see below:
I have a sample variable (@Default: #f5f3f3f3;) defined in the header of the less file(please see below sample style)
.content {
height: 92.7vh;
width: 100vw;
background-color: @Default; //(@Default = #f5f3f3f3) shows within the less file when it is loaded.
border: none;
}
However when I use less.modifyVars({'@Default': defaultValue}) where defaultValue is a color code predetermined(eg "#413e3e") in typescript, it does not update the @Default variable with the new value.
Note: I am currenly using Less ^4.1.2(checked both global and local versions that I have tried), "less-loader": "10.2.0",
I am also using typescript definitions for Less (@types/less - npm)
Note: I have also tried this on angular 12 and it's the same issue.
Hi,
I am trying to use Less in my angular 13 project, but the less.modifyVars does not seem to update the variables as defined in the less files?
I get this information message "Less has finished and no sheets were loaded." for each of the less file that I have in my project, not sure if it's related to the issue though.
Please see below my implementation.
I have installed less(call npm install --save-dev and npm install --save-dev -g) both globally and locally but none worked.
The paths to my less files in angular.json file is as follows, please see below:
"styles": [ "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css", "./node_modules/jquery-ui-dist/jquery-ui.min.css", "./node_modules/lib-generics/src/lib/styles/reset.css", "./node_modules/bootstrap/dist/css/bootstrap.css", "./node_modules/lib-generics/src/lib/styles/loginstyle.less", "./node_modules/lib-generics/src/lib/styles/sidebar.less", "./node_modules/lib-generics/src/lib/styles/Site.less", "src/styles.css" ], "scripts": [ "./node_modules/jquery/dist/jquery.min.js", "./node_modules/jquery-ui-dist/jquery-ui.min.js", "./node_modules/lib-generics/src/lib/scripts/asidebar.jquery.js", "./node_modules/bootstrap/dist/js/bootstrap.js", "./node_modules/less/dist/less.js" ] }
I have a sample variable (@Default: #f5f3f3f3;) defined in the header of the less file(please see below sample style)
.content { height: 92.7vh; width: 100vw; background-color: @Default; //(@Default = #f5f3f3f3) shows within the less file when it is loaded. border: none; }
However when I use less.modifyVars({'@Default': defaultValue}) where defaultValue is a color code predetermined(eg "#413e3e") in typescript, it does not update the @Default variable with the new value.
Note: I am currenly using Less ^4.1.2(checked both global and local versions that I have tried), "less-loader": "10.2.0", I am also using typescript definitions for Less (@types/less - npm)
Note: I have also tried this on angular 12 and it's the same issue.