Sunday, March 12, 2017

Bootstrap classes broke after versioning with laravel-elixir

For unknown reasons all of bootstrap classes are not functioning properly after I used laravel-elixir .version() method, example, all of the form inputs that have a class of form-control and a width of 100% have had their width decreased to a very small space, also drop-down menu buttons are not doing anything now, I am not sure what may have caused this actually.

gulpfile.js

const elixir = require('laravel-elixir');

require('laravel-elixir-vue-2');

elixir((mix) => {
    mix.sass('app.scss')
       .webpack('app.js')
       .version(['css/app.css', 'js/app.js']);
});

Imports at the beginning of app.scss

// Fonts
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);

// Variables
@import "variables";

// Bootstrap
@import "node_modules/bootstrap-sass/assets/stylesheets/bootstrap";

Browsers are loading the correct hashed version file, but the styling is kinda not there, please help.



via Omar Tarek

Advertisement