# Possible reordering of main.css and main.js rendering

**URL:** https://discourse.roots.io/t/possible-reordering-of-main-css-and-main-js-rendering/4102
**Category:** sage
**Tags:** gulp
**Created:** 2015-06-23T11:58:55Z
**Posts:** 15

## Post 1 by @govnaah — 2015-06-23T11:58:55Z

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.

---

## Post 2 by @martinvd — 2015-06-23T18:24:32Z

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

---

## Post 3 by @govnaah — 2015-06-23T20:31:31Z

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

---

## Post 4 by @austin — 2015-06-24T03:34:22Z

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

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

---

## Post 5 by @govnaah — 2015-06-24T08:56:04Z

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.

---

## Post 6 by @austin — 2015-06-24T18:55:35Z

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

> <https://github.com/jasny/bootstrap/blob/f96d55965a6c3a29014c940ae3f52aeeda1920f7/scss/jasny-bootstrap.scss>

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

---

## Post 7 by @austin — 2015-06-24T18:58:25Z

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](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"](https://github.com/sass/sass/issues?q=is%3Aopen+is%3Aissue+label%3A%22%40import+v2%22)

---

## Post 8 by @austin — 2015-06-24T19:03:15Z

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

> <https://gist.github.com/austinpray/fad2e60880c963e9a3a5>

---

## Post 9 by @govnaah — 2015-06-25T09:28:37Z

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.

---

## Post 10 by @govnaah — 2015-06-25T18:03:20Z

@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

---

## Post 11 by @austin — 2015-06-25T23:25:59Z

@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

---

## Post 12 by @govnaah — 2015-06-26T08:09:14Z

@austin that absolutely solves the problem.

Thank you so much sir.

---

## Post 13 by @promptdev — 2015-06-26T16:50:06Z

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

---

## Post 14 by @promptdev — 2015-06-26T17:06:34Z

@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"
	  }
    }
```

---

## Post 15 by @govnaah — 2015-06-29T08:15:42Z

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

Glad you got it working too.