Spark + Semantic UI

Guys,

I've been stuck on this issue for hours so hopefully somebody here can help me out. I started building out pages for the main site that uses Semantic UI. Spark uses Bootstrap, but I figured it shouldn't be too difficult to get them to play nicely together so that I can use both. I built out a few pages and everything was looking nice and working well. These pages were running the default Spark + Bootstrap app.css and I added semantic.css and other miscellaneous css to each individual page just to make sure that it was all going to work well.

I got everything working and looking the way that I wanted and then I decided to concatenate the semantic.css along with Spark's app.css and my own custom SASS into a single file using Elixir. This is where the heading fonts started to display weird.

Headings BEFORE concatenating css files:

Headings AFTER concatenating css files:

Notice how the text on the buttons are a bolder and in the H1 heading the letters are bolder and spaced apart more. Look at the t and the i in the word identity. You really notice it there.

Here's how I had my layout file PRIOR to concatenating the css with Elixir:

<link href="/css/sweetalert.css" rel="stylesheet"> 
<link href="/css/app.css" rel="stylesheet"> 
<link href="/css/semantic.css" rel="stylesheet">

Here's my layout file AFTER concatenating with Elixir:

<link href="/css/sweetalert.css" rel="stylesheet"> 
<link href="{{ elixir('css/app.css') }}" rel="stylesheet"> 

Here's my gulpfile:

elixir(function(mix) {
    mix.less('app.less', './public/css/spark.css')
       .browserify('app.js', null, null, { paths: 'vendor/laravel/spark/resources/assets/js' }) // src, output, baseDir, options)
       .copy('node_modules/sweetalert/dist/sweetalert.min.js', 'public/js/sweetalert.min.js')
       .copy('node_modules/sweetalert/dist/sweetalert.css', 'public/css/sweetalert.css')
       .copy('vendor/bower_components/jquery/dist/jquery.min.js', 'public/js/jquery.min.js')
       .copy('vendor/bower_components/semantic/dist/semantic.js', 'public/js/semantic.js')
       .copy('vendor/bower_components/semantic/dist/semantic.css', 'public/css/semantic.css')
       ;
    
    mix.sass('app.scss', './public/css/ucpics.css')
        .styles(['./public/css/spark.css', './public/css/semantic.css', './public/css/ucpics.css'], './public/css/app.css')
        .version([
        'public/js/semantic.js',
        'public/css/app.css',
        ])
    .browserSync({ proxy: 'undercoverpics.dev' });
});

gulp.task('fonts', function() {
    gulp.src(['vendor/bower_components/semantic/dist/themes/default/assets/fonts/**/*'])
        .pipe(gulp.dest('public/build/css/themes/default/assets/fonts'));
});

If I remove spark.css from mix.styles, the headings display correctly. So that had me going down the Bootstrap rabbit hole trying to figure out which styles I needed to override and I wasn't ever able to come up with anything that worked.

Now for the kicker...if I leave spark.css in mix.styles, then ADD semantic.css back to my layout file like so, everything works correctly again:

<!-- CSS -->
<link href="/css/sweetalert.css" rel="stylesheet"> 
<link href="{{ elixir('css/app.css') }}" rel="stylesheet"> 
<link href="/css/semantic.css" rel="stylesheet">

This works, but obviously I'd rather not load in semantic.css when I've already concatenated it inside app.css. Is there something fundamental that I'm not understanding about the way that Elixir concatenates css files? Any help would be appreciated. Thank you!