使用 grunt-contrib-less 定义变量答案

【问题标题】：Defining variables with grunt-contrib-less使用 grunt-contrib-less 定义变量
【发布时间】：2016-03-12 08:00:22
【问题描述】：

除非我误解了this documentation，否则可以在您的Gruntfile 中定义一个全局less 变量并在您的.less 文件中引用它（假设有原因）。

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'
    }
  },

那（上图）是我对Gruntfile 的条目，我试图在我的一个.less 文件（main.less）中引用变量root，但每次它都会抛出一个错误在我的控制台中，main.less 中的“@root is undefined”。我是否误解了grunt-contrib-less 的可能性？还是我只是做错了什么？

【问题讨论】：

标签： css gruntjs less

【解决方案1】：

好吧，我想通了。不得不像这样在我的gruntfile 中调整我的较少任务（基于文档/搜索问题部分）：

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

因此，与其为这个变量修改创建一个完全独立的任务，我需要在我的 less 任务的选项部分简单地抛出 modifyVars 选项。更重要的是（因为我之前已经尝试过），将我的变量的新值用单引号括起来尽管已经将它们双引号。这是一个非常令人头疼的问题。

你的变量应该是这样的：

 '"myWorkingValue"'

而不是这样的：

 "myNonWorkingValue"

并且，为了完整起见，请像这样引用 .less 文件中的变量：

@{myModifiedVariable}

此时你应该已经准备好了。

【讨论】：

太好了，我想知道为什么 modifyVars: { foo: 'bar' } 什么都没做。