CODEWITHSUNDEEP
cssgruntjsless
Matt
Matt

Reputation: 3557

Defining variables with grunt-contrib-less

Unless I'm misunderstanding this documentation it's possible to define a global less variable within your Gruntfile and reference it in your .less file (pretend there's a reason). 

less: {
  modVar: {
    options: {
      plugins: [
        new (require('less-plugin-autoprefix'))
      ],
      modifyVars: {
        root: "<%= grunt.option('distRoot') %><%= grunt.option('distTarget') %>"
      },
      root: "<%= grunt.option('distRoot') %><%= grunt.option('distTarget') %>",
    },
    files: {
      '<%= yeoman.dist %>/styles/main.less' : '<%= yeoman.app %>/styles/{,*}*.less'
    }
  },

That (above) is my entry for the Gruntfile, and I'm trying to reference the variable root in one of my my .less files (main.less), but every time it's throwing an error in my console, "@root is undefined" in main.less. Am I misunderstanding what's possible with grunt-contrib-less? Or am I simply doing something wrong?

Upvotes: 2

Views: 726

Answers (1)

Matt
Matt

Reputation: 3557

Alright, I figured it out. Had to tweak my less task in my gruntfile like so (based on the documentation/scouring the issues section):

less: {
  options: {
    compress: true,
    yuicompress: true,
    optimization: 2,
    modifyVars: {
      root: '"<%= grunt.option(\'distRoot\') %><%= grunt.option(\'distTarget\') %>"'
    }
  },
  /* blah, blah, blah...other less stuff.... */
}

So, rather than create a completely separate task for this variable modification I needed to simply throw the modifyVars option in the options section of my less task. More importantly (because I had tried that previously), was to wrap my variable's new value in single quotes despite having them already doubly-quoted. This was a huuuuuge headache to figure out.

Your variables should look like this: 

 '"myWorkingValue"'

and not like this:

 "myNonWorkingValue"

And, for completeness, reference the variables in your .less file like so:

@{myModifiedVariable}

You should be set at this point.

Upvotes: 2

Related Questions