Possible reordering of main.css and main.js rendering

sage
#1

Hi everyone,

I have successfully included bootstrap-jasny via bower

bower install jasny-bootstrap --save

it shows up in the /dist/main.css file alright, but it is added before the bootstrap css and before the bootstrap js.
jasny-boostrap requires that it is added after bootstrap.

I was hoping to get help to change the order of the main.css and main.js output if possible.

Thank you.

#2

You can import jasny-bootstrap.scss or jasny-bootstrap.less after you have imported Bootstrap.

#3

Thank you @martinvd that did the trick.
Now, its getting complied twice. via bower dependancies and now the import.
I’m thinking the file size can be optimised further if it was included once. Am i better off including it via third-party method? and ignore the bower.json totally. (sorry if its an obvious question, i just like to be sure its a good way to achieve my purpose)

thank you

#4

Maybe you are running into this error? https://github.com/roots/sage/pull/1485

Can you try that out and see if it fixes it?

#5

Thanks @austin, so here is what i did with the link you sent.

  1. I replaced my gulpfile.js with the one found in the link,
  2. I added ‘gulp-order’ to my package.json
  3. I run npm update
  4. I run bower update
  5. I run gulp

The jasny-boostrap is still added before the bootstrap as seen in the main.css.map.

Did I do something wrong in implementing the changes from the link?

Thank you.

#6

I would recommend using overrides in the bower.json to point jasny’s scss source files:

That way it will be compiled in the correct order when main.scss is compiled.

#7

You could also just import the css file manually and tell it not to load the css file using the bower overrides. https://github.com/sass/libsass/pull/754

Also send positive vibes to all of these issues to get them merged: https://github.com/sass/sass/issues?q=is%3Aopen+is%3Aissue+label%3A"%40import+v2"

#8

Here’s an example bower.json that should work:

#9

Mighty Thanks @austin, that worked great.
Minor problem was that some elements (such as dropdown) were not working due to jasny-bootstap.js still loading before bootstrap.js but i solved that by calling the dropdowns via JavaScript.

Thank you very much Sir.

I also noticed bootstrap js driven component such as modal is also not working properly (out of the box). i have to initiate that also.

#10

@austin the jasny-bootstrap.js is still being added before bootstrap.js in the main.js is there a possible fix?
I have been trying my hands on it with my little knowledge but no solutions yet.

Thanks

Duplicated Bootstrap assets
#11

@govnaah oh you know what? It looks like jasny bootstrap is relying on bootstrap and not bootstrap-sass. That’s why it can’t figure out the order.

In that same overrides try overriding the “dependencies” property to require jquery and bootstrap-sass

Duplicated Bootstrap assets
#12

@austin that absolutely solves the problem.

Thank you so much sir.

#13

Hey there @govnaah, could you please post your working code? thanks in advance.
Been trying with no success…

#14

@govnaah nevermind got it working… it resumes to what @austin suggested:
overriding jasny-bootstrap main and dependencies

"overrides": {
    "modernizr": {
      "main": "./modernizr.js"
    },
    "jasny-bootstrap": {
      "main": [
        "./dist/css/jasny-bootstrap.css",
		"./dist/js/jasny-bootstrap.js"
      ],
      "dependencies": {
	    "jquery": ">= 1.9.0",
	    "bootstrap-sass-official": "3.3.5"
	  }
    }
Control js order
#15

sorry @promptdev, i didn’t see this in time.

Glad you got it working too.