Question

奇怪的bootstrap 4（alpha6）行为。

我的main.scss看起来像那样：

$fa-font-path: "../assets/font-awesome/fonts/";

@import '../assets//bootstrap/scss/bootstrap';
@import "../assets/include-media/dist/include-media.scss";
@import "../assets/font-awesome/scss/font-awesome";

@import 'https://fonts.googleapis.com/css?family=Roboto+Slab:300,700,400';
@import 'https://fonts.googleapis.com/css?family=Cinzel';


@import "helper/fonts";
@import "helper/variables";
@import "helper/helper";
@import "global";

@import "partials/header";
@import "partials/footer";
@import "components/navigation";

@import "views/index";

在我的global.scss中我得到了：

body {
    color: #fff;
    font-weight: 400;
    background-color: #000 !important;
    font-weight: 300;
    font-family: $font-family-sans-serif;
}

但不知何故，bootstrap-4中包含的scss会覆盖我自己的css代码。我用bower安装了b4-a6，用gulp编译（通常的方式）并使用remote-sync（atom.io）上传。我可以在服务器上打开并读取正确的css文件，我自己的css甚至包含在编译文件的底部，所以显然编译的文件被正确上传但浏览器没有读取我自己的css。
使用bootstrap 3.2一切正常。

有什么想法吗？

编辑1：
Firefox（最新）和Chrome（最新测试版）的行为相同。 Safari（最新的公共测试版）读取css罚款，网站很好。

编辑2：
这是我的gulp css文件：

var gulp       = require('gulp'),
    config     = require('../config'),
    sass       = require('gulp-sass'),
    sourcemaps = require('gulp-sourcemaps'),
    prefix     = require('gulp-autoprefixer'),
    header     = require('gulp-header'),
    concat     = require('gulp-concat'),
    watch      = require('gulp-watch'),
    notify     = require('gulp-notify');

// Compile our css and push it to the public webfolder
gulp.task('css_main', function () {
    gulp.src(config.themePath + 'scss/main.scss')
        .pipe(notify({
            title: "SASS",
            message: "Compiling main.scss ..."
        }))
        .pipe(sourcemaps.init())
        .pipe(sass().on('error', function(error) {
            notify().write(error);
        }))
        .pipe(prefix('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
        .pipe(header("/* This file is generated, do not edit by hand! */\n"))
        .pipe(sourcemaps.write('../css/maps', {
            includeContent: false,
            sourceRoot: '../scss'
        }))
        .pipe(notify({
            title: "SASS",
            message: "Compiled: <%= file.relative %>"
        }))
        .pipe(gulp.dest(config.themePath + 'css/'));
});

自己的CSS不会覆盖Bootstrap

0 个答案: