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

Question

我正在尝试更新 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;
    }
}

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

Answer 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']
  }
},