I broke my Sage 8.5 by Running $ bower install jquery.sliding.menu

sage
1

Basically, I was stupid, and now this line is not getting added to main.scss automatically:

@import "../../bower_components/bootstrap/scss/bootstrap.scss";

Here’s what happened:

I wanted to use jQuery BootSideMenu, and saw package.json… and thought, hey, may be I can add this automatically.

So, I did this::

bower install jquery.sliding.menu

And got this:

bower jquery.sliding.menu#* not-cached https://github.com/aoopvn/jquery.sliding.menu.git#*
bower jquery.sliding.menu#*    resolve https://github.com/aoopvn/jquery.sliding.menu.git#*
bower bootstrap#^3.3.7          cached https://github.com/twbs/bootstrap.git#3.3.7
bower bootstrap#^3.3.7        validate 3.3.7 against https://github.com/twbs/bootstrap.git#^3.3.7
bower jquery.sliding.menu#*   download https://github.com/aoopvn/jquery.sliding.menu/archive/master.tar.gz
bower jquery.sliding.menu#*    extract archive.tar.gz
bower jquery.sliding.menu#*     invalid-meta for:/tmp/arslan/bower/b900d698ed356be3b268b0194fb3e7f4-32159-dTt6uz/bower.json
bower jquery.sliding.menu#*     invalid-meta The "name" is recommended to be lowercase, can contain digits, dots, dashes
bower jquery.sliding.menu#*         resolved https://github.com/aoopvn/jquery.sliding.menu.git#132fbef750
bower jquery sliding menu#*          install jquery sliding menu#132fbef750
bower bootstrap#^3.3.7               install bootstrap#3.3.7

jquery sliding menu#132fbef750 bower_components/jquery sliding menu
└── jquery#3.1.1

bootstrap#3.3.7 bower_components/bootstrap
├── jquery#3.1.1
└── tether#1.3.7

Then running gulp keeps giving me this:

[13:01:19] Starting 'clean'...
[13:01:19] Finished 'clean' after 20 ms
[13:01:19] Starting 'default'...
[13:01:19] Starting 'build'...
[13:01:19] Starting 'wiredep'...
[13:01:19] Finished 'default' after 94 ms
[13:01:19] Finished 'wiredep' after 146 ms
[13:01:19] Starting 'styles'...
assets/styles/components/_grid.scss
Error: no mixin named make-col-ready

       Backtrace:
       	assets/styles/components/_grid.scss:3
        on line 3 of assets/styles/components/_grid.scss
>>   @include make-col-ready();
   -----------^

[13:01:19] Finished 'styles' after 184 ms
[13:01:19] Starting 'jshint'...
[13:01:19] Finished 'jshint' after 96 ms
[13:01:19] Starting 'scripts'...
[13:01:22] Finished 'scripts' after 2.58 s
[13:01:22] Starting 'fonts'...
[13:01:22] Starting 'images'...
[13:01:22] Finished 'fonts' after 4.53 ms
[13:01:22] gulp-imagemin: Minified 0 images
[13:01:22] Finished 'images' after 4.9 ms
[13:01:22] Finished 'build' after 3.01 s

And then, this:

bower uninstall jquery.sliding.menu
bower not-installed 'jquery.sliding.menu' cannot be uninstalled as it is not currently installed

So, then:

bower install bootstrap
bower bootstrap#*               cached https://github.com/twbs/bootstrap.git#3.3.7
bower bootstrap#*             validate 3.3.7 against https://github.com/twbs/bootstrap.git#*
bower                        ENOTFOUND Package jquery sliding menu=jquery.sliding.menu not found

Then:

bower prune
bower not-installed '' cannot be uninstalled as it is not currently installed
bower uninstall     tether
bower not-installed '' cannot be uninstalled as it is not currently installed

Sigh. Then this:

bower cache clean
bower deleted       Cached package bootstrap: /home/arslan/.cache/bower/packages/478ab1d28ba78f550601bf536eea62f5/3.3.7
bower deleted       Cached package bootstrap: /home/arslan/.cache/bower/packages/76825ba06db421bbfbda0853e440b3f5/4.0.0-alpha.4
bower deleted       Cached package jquery: /home/arslan/.cache/bower/packages/35300e45e44dbc6f186ed069533ef0af/3.1.1
bower deleted       Cached package tether: /home/arslan/.cache/bower/packages/1c9e1952a4d7920159446eb6e57866a0/1.3.7

Then:

bower install bootstrap
bower bootstrap#*           not-cached https://github.com/twbs/bootstrap.git#*
bower bootstrap#*              resolve https://github.com/twbs/bootstrap.git#*
bower bootstrap#*             download https://github.com/twbs/bootstrap/archive/v3.3.7.tar.gz
bower                        ENOTFOUND Package jquery sliding menu=jquery.sliding.menu not found

Then I deleted the folder for jquery.sliding.menu.

Then,

bower install bootstrap
bower bootstrap#*               cached https://github.com/twbs/bootstrap.git#3.3.7
bower bootstrap#*             validate 3.3.7 against https://github.com/twbs/bootstrap.git#*
bower bootstrap       extra-resolution Unnecessary resolution: bootstrap#v4.0.0-alpha.4

But no @import “…/…/bower_components/bootstrap/scss/bootstrap.scss”; getting added to main.scss

How do I fix this?

2

Okay, so I got out of this by changing my bower.json from:

{
  "name": "sage",
  "homepage": "https://roots.io/sage/",
  "authors": [
    "Ben Word <ben@benword.com>"
  ],
  "license": "MIT",
  "private": true,
  "dependencies": {
    "bootstrap": "^3.3.7"
  },
  "resolutions": {
    "bootstrap": "v4.0.0-alpha.4"
  }
}

to:

{
  "name": "sage",
  "homepage": "https://roots.io/sage/",
  "authors": [
    "Ben Word <ben@benword.com>"
  ],
  "dependencies": {
    "bootstrap": "v4.0.0-alpha.4"
  }
}

Then

bower update

And then

gulp

I’ll use this for adding the menu. Correct me please if I there is a better way.

3

Did you intend to use Bootstrap v4? Or v3.3.7? Or doesn’t matter to you?