问题描述:

I am trying to override the @grid-float-breakpoint: in the variables.less file. (in order to adjust the collapse width of the top menu)

In my index file i am importing the Bootstrap core files css files with:

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">

I am then importing the compiled and adjusted variables files after.

<link rel="stylesheet/less" type="text/css" href="less/variables.less">

Why does my variables.less not override the bootstrap.min.css?

网友答案:

It won't be possible to override the variables that way as they have already been compiled to CSS. Less is a preprocessor so you'd need to override them and then compile and include your compiled css. For this you can use a variety of command line tools (I use http://gruntjs.com/ and https://npmjs.org/package/grunt-contrib-less ) or there are apps!

Note that you'll need a separate less file with your custom values in and then import it after you've imported variables.less, e.g.

@import "bootstrap.less"; /* Imports all the bootstrap less files in the correct order, including variables.less */
@import "custom-variables.less"; /* Your custom less variables */ 

See this answer Overriding Bootstrap LESS variables after @import for more details.

相关阅读:
Top