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

Question

除非我误会了this documentation可以定义一个全局的 less您的 Gruntfile 中的变量并在您的 .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 的条目，我正在尝试引用变量 root在我的一个.less文件(main.less)，但每次它在我的控制台中抛出错误时，“@root is undefined ” in main.less .我是不是误解了 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}

此时您应该准备就绪。