Меньше JS МЕНЬШЕ CSS - modifyVars не работает для импорта внутри селектора класса - PullRequest
Новая
       20

Меньше JS МЕНЬШЕ CSS - modifyVars не работает для импорта внутри селектора класса

0 голосов
/ 05 мая 2020

Я использую Less js для компиляции файлов less в браузере. Также такая же проблема наблюдается при использовании задачи Grunt Less (grunt-contrib-less). У меня проблема с тем, что значения метода modifyVars не учитываются, когда import находится внутри селектора класса

Для моего варианта использования следующие файлы

style.less с импортом внутри селектора класса 

.my-app {
  @import url("variables.less");
  color: @text-color;
  background-color: @body-bg;
}

variables.less 

@body-bg:               #f1f2f3;
@text-color:            #5e5e5e;

При вызове 

less.modifyVars(
  { "@body-bg": 'yellow',
    "@brand-success": 'cyan'
   })

style. css Вывод выглядит следующим образом, и он не имеет значения для переменных, установленных в modifyVars 

.my-app {
  color: #5e5e5e;
  background-color: #f1f2f3;
}

В то время как, когда style.less модифицируется так, чтобы оператор импорта находился вне селектора класса, т.е. 

@import url("variables.less");
  .my-app {
    color: @text-color;
    background-color: @body-bg;
  }

Ожидаемый результат, т.е. значения modifyVars равны рассматривается. style. css

.my-app {
  color: purple;
  background-color: yellow;
}

Как мы можем изменить переменные, которые являются частью импорта внутри селектора класса?

...