Less js modifyVars does not work with string path

Question

i try to work with less js and available string path in less with custom modifyvars code

available.less

  @image-path : "/assets/images";

  @bg-image : "/bg/01.png";

style.less

  @import "available.less";

  body{
    background: url('@{image-path}@{bg-image}') repeat top left;
 }

in javascript

    less.modifyVars({
      '@bg-image' : "/bg/08.png"
     });

i get error ParseError: Unrecognised input

    @bg-image: /bg/08.png;

how to fix it

so if i change modifyVars to

    less.modifyVars({
     '@bg-image' : "'/bg/08.png'"
    });

with value wrap in double quote + single qoute it work ! but i dont need this fix because modifyVars i'm get form html element by jquery

why not wrap your input from the form element in quotes if that works? — Patrick Gunderson, Jan 06 '15 at 23:01
my element too much , like color , fontsize ... so when i wrap all this value in my function then bg image modifyvars work so , whit color , font size ex... not work , i think only need wrap input as string or path ! can you give me some solution to do this @PatrickGunderson — Peter Jack, Jan 06 '15 at 23:20
You need to escape the strings that come from your html form using "escapeURIComponent" — Patrick Gunderson, Jan 06 '15 at 23:38
Uncaught ReferenceError: escapeURIComponent is not defined @PatrickGunderson when i using encodeURIComponent i get http://localhost:8080/project/asset/images%2Fbg%2F02.png not found http://localhost:8080/project/asset/images/bg/02.png right path ? another solution — Peter Jack, Jan 06 '15 at 23:58

score 1 · Answer 1 · edited May 23 '17 at 12:14

1

Consider to add quotes around your string only when it is a URL. You can test your string for having a /:

if(field.value.indexOf("/") !== -1) {
          variables['@' + field.name] = '"' + field.value + '"';
}

edited May 23 '17 at 12:14

Community

answered Jan 07 '15 at 11:52

Bass Jobsen

1 Answers1