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.

Links in main layout page:

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Styles -->
    <link rel="stylesheet" href="{{ elixir('css/app.css') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

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.

ejdelmonico

9 years ago

Level 53

Well, the only thing that stands out is that you forgot quotes in the url for your import statement. Maybe that messed up the uglify process. Also, sometimes you have to scroll up to see warnings.

1 like

Yugi

9 years ago

Best Answer

Level 23

Thanks for the insight, actually sorry for the useless post, found out that I overwrote some of of the bootstrap classes in my .scss file which caused mayhem all over the application, rewrote the stuff as ids and solved the issue.

Please or to participate in this conversation.