gpt4 book ai didi

css - 为什么 grunt-contrib-less 找不到 Bootstrap 变量?

转载 作者:行者123 更新时间:2023-11-28 08:52:28 24 4
gpt4 key购买 nike

我正在编写一个网络应用程序,并希望将一些 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.

我已经尝试了所有我能想到的方法,

最佳答案

这是因为您正在尝试编译 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'
}
}
}

如果您只需要变量和混入,您可以使用 @import (reference) "bootstrap/bootstrap.less"; 代替。这样就不会输出任何 Bootstrap 样式。

关于css - 为什么 grunt-contrib-less 找不到 Bootstrap 变量?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21672586/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com