Bootstrap - 导航栏更改在 navbar.less 中应用时不起作用答案

【问题标题】：Bootstrap - navbar changes not working when applied in navbar.lessBootstrap - 导航栏更改在 navbar.less 中应用时不起作用
【发布时间】：2015-03-04 00:37:05
【问题描述】：

我正在尝试在 Bootstrap 中更新导航栏的样式。如果我只是创建一个新文件 main.css，导入 bootstrap.min.css，并添加我想要的属性，这很容易：

//     main.css

.navbar-header {
    float: left;
    padding: 15px;
    text-align: center;
    width: 100%;
}

但是，当我尝试将相同的属性放在 navbar.less 中然后编译它（而不是使用 main.css）时，更改不起作用：

//     bootstrap/less/navbar.less

.navbar-header {
    // BEGIN CUSTOM STYLES

    float: left;
    padding: 15px;
    text-align: center;
    width: 100%;

    // END CUSTOM STYLES

    &:extend(.clearfix all);

    @media (min-width: @grid-float-breakpoint) {
        float: left;
    }
}

谁能告诉我为什么会这样？

【问题讨论】：

标签： css twitter-bootstrap less navbar

【解决方案1】：

这是一个关于 grunt 的问题。我在我的页面中使用了 bootstrap.min.css，而 grunt 并没有缩小编译后的 bootstrap.css。

我使用grunt watch 自动编译文件。但是，我使用的默认 grunt 配置没有运行 css:minifyCore 任务。因此，我不得不从这里更新 Gruntfile.js 中的一个部分：

watch: {
  src: {
    files: '<%= jshint.core.src %>',
    tasks: ['jshint:src', 'qunit', 'concat']
  },
  test: {
    files: '<%= jshint.test.src %>',
    tasks: ['jshint:test', 'qunit']
  },
  less: {
    files: 'less/**/*.less',
    tasks: 'less'
  }
},

到这里：

watch: {
  src: {
    files: '<%= jshint.core.src %>',
    tasks: ['jshint:src', 'qunit', 'concat']
  },
  test: {
    files: '<%= jshint.test.src %>',
    tasks: ['jshint:test', 'qunit']
  },
  less: {
    files: 'less/**/*.less',
    tasks: ['less', 'cssmin:minifyCore']
  }
},

【讨论】：