css - 使用 grunt-contrib-less 定义变量

Question

除非我误会了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 之一中引用变量 root code> 文件 (main.less)，但每次在我的控制台中抛出错误时，都会在 main.less 中显示“@root is undefined”。我是否误解了 grunt-contrib-less 的可能性？或者我只是做错了什么？

Answer 1

好吧，我明白了。必须像这样调整我的 gruntfile 中的 less 任务(基于文档/搜索问题部分):

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}

此时您应该已经设置好了。