我试图自定义Twitter Bootstrap的CSS而不改变引导代码的本地副本.*所以我将Twitter Bootstrap项目克隆到一个文件夹中,并将我的应用程序代码放在它自己的文件夹中：
/html
/bootstrap
...etc...
/js
/less
/MyApp
...etc...
/common_files
/less
style.less
在我的“style.less”文件中,我定义了一些LESS变量,然后包含引导程序文件：
/* custom settings that deviate from Bootstrap's default values */ @sansFontFamily: Trebuchet MS,Tahoma,sans-serif,Arial; @baseFontSize: 11px; @baseLineHeight: 18px; /* import bootstrap components from bootstrap-dedicated folder */ @import "../../../bootstrap/less/bootstrap.less"; @import "../../../bootstrap/less/responsive.less";
从LESSCSS variables are really constants开始,当我将LESS文件编译成CSS时,我很惊讶我的@sansFontFamily没有被拿起来：lessc style.less> MyApp.css –yui-compress
那么……我错过了什么？为什么我的变量被Bootstrap的LESS文件中定义的变量覆盖？
* – 我已经检查了“Twitter Bootstrap Customization Best Practices”,但是考虑利用常数将是一种更好的方法(如果我可以让它工作).
解决方法
正确的方法是首先导入引导资产,然后使用LESS变量定义自定义值.所以,考虑到问题中的目录结构：
如果您使用的是Bootstrap 2.x版：
/* import bootstrap components from bootstrap-dedicated folder */ @import "../../../bootstrap/less/bootstrap.less"; @import "../../../bootstrap/less/responsive.less"; /* custom settings that deviate from Bootstrap's default values */ @sansFontFamily: Trebuchet MS,Arial; @baseFontSize: 11px; @baseLineHeight: 18px;
如果您使用的是Bootstrap 3.x版：
/* import bootstrap components from bootstrap-dedicated folder */ @import "../../../bootstrap/less/bootstrap.less"; /* custom settings that deviate from Bootstrap's default values */ @font-family-sans-serif: Trebuchet MS,Arial; @font-size-base: 11px; @line-height-base: 18px;
完整的变量列表can be found in variables.less文件.