modifyVars values are not considered when imports are inside a class selector
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 17k
- Forks
- 3.4k
- Avg merge
- 7h 42m
- Merged PRs (30d)
- 26
Description
style.less
.my-app {
@import url("variables.less");
color: @text-color;
background-color: @body-bg;
}
variables.less
@body-bg: #f1f2f3;
@text-color: #5e5e5e;
Compiling with
modifyVars: {"body-bg": 'yellow', 'text-color' : 'purple' }
Style.css is (modifyVars are not considered here)
.my-app {
color: #5e5e5e;
background-color: #f1f2f3;
}
But when import is moved outside the selector in style.less
@import url("variables.less");
.my-app {
color: @text-color;
background-color: @body-bg;
}
Style.css is as expected.
.my-app {
color: purple;
background-color: yellow;
}
How to have the "modifyVars" values honored for import inside class selectors ?
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the issue with the shown style.less and variables.less files, comparing an import inside .my-app with one outside it. Trace how modifyVars is applied during nested imports; done when the nested-import case emits purple and yellow like the top-level import case.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- compilers
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100