Question

我正在编写一个Web应用程序，并希望将一些css @media查询与Bootstrap中的变量挂钩。所以我下载了bootstrap并决定让我的grunt编译它，当它编译我自己的less文件时。

我的Gruntfile的相关部分看起来像这样

less: { 
  dev: {
    options:{  
      paths: ['app/stylesheets', 'app/stylesheets/bootstrap'], // All the `less` files from bootstrap are placed in 'app/stylesheets/bootstrap' //  
    },  
    files: {  
      'build/pretty/style.css':'app/stylesheets/**/*.less'  
    }  
  }
}

但是当我运行grunt grunt less:dev时，它会失败并输出

Running "less:dev" (less) task
>> NameError: variable @alert-padding is undefined in app/stylesheets/bootstrap/alerts.less on line 10, column 12:  
>> 9 .alert {  
>> 10   padding: @alert-padding;  
>> 11   margin-bottom: @line-height-computed;  
Warning: Error compiling app/stylesheets/bootstrap/alerts.less Use --force to continue.  

Aborted due to warnings.

我已经尝试过各种我能想象的方式，

Answer 1

这是因为您正在尝试编译app/stylesheets目录中的每个.less文件，然后将它们连接到build/pretty/style.css。这就是任务的工作方式。

你可能会有更好的运气：

// app/stylesheets/style.less
@import "bootstrap/bootstrap.less";

// Now you'll have every bootstrap mixin, variable, class, etc available

然后，在你的任务中：

less: {
  dev: {
    files: {
      'build/pretty/style.css': 'app/stylesheets/style.less'
    }
  }
}

如果您只想要变量和mixins，可以改用@import (reference) "bootstrap/bootstrap.less";。这样就不会输出Bootstrap样式。

为什么grunt-contrib-less找不到引导变量？

1 个答案: