Hi!
I recently started using Sage for my projects and I have a question. I researched a few topics with no luck ~
Bootstrap is great, but I want to add another SASS framework.
My steps:
bower install web-starter-kit in terminal
The folder is then created under Bower Components
To my understanding, wiredep will automatically inject the dependency in the main.sass which then will compile to the main.css.
This not only applies to Google Web Starter, but to any other framework (Bourbon, Semantic UI, etc.).
Is there anything I’m missing? I read through several tutorials but I can’t seem to get this to work. Of course I can just add everything manually in the folders but that defeats the whole purpose of using Bower and this workflow in my opinion.
I apologize if this is a pretty basic question!
Thanks!
Mateo.
Here are my current bower components:
Here is where the dependencies are supposed to appear:
First of all, instead of bower install, you should be typing bower install --save, that keeps it in your bower.json file so that it can be found down the road.
Second, wiredep is only activated when you run gulp (which runs the gulp wiredep task), so make sure to do that after any bower install (just making sure you tried that, you probably did).
Now onto Web Starter Kit:
After you run bower install web-starter-kit --save you will see this warning from bower itself:
See the invalid-meta warning about no “main” entry? Packages without a “main” entry cannot be picked up by wiredep. You will need to add an overrides argument for web-starter-kit in the bower.json, similar to the one that we’ve added for Bootstrap, with the files you want. (you can see examples of that all over this forum, and right there in the bower file itself)
This is what your bower.json might looks like:
(keep in mind I didn’t add the fonts or images, not sure if you can use a * there or not to select them all)
{
"name": "sage",
"homepage": "https://roots.io/sage/",
"authors": [
"Ben Word <ben@benword.com>"
],
"license": "MIT",
"private": true,
"dependencies": {
"bootstrap-sass": "3.3.5",
"web-starter-kit": "~0.5.9"
},
"overrides": {
"web-starter-kit": {
"main": [
"./app/scripts/main.js",
"./app/styles/main.scss",
"all images need to be added here, I'm too lazy",
"all fonts need to be added here, I'm still too lazy"
]
},
"bootstrap-sass": {
"main": [
"./assets/stylesheets/_bootstrap.scss",
"./assets/javascripts/bootstrap/transition.js",
"./assets/javascripts/bootstrap/alert.js",
"./assets/javascripts/bootstrap/button.js",
"./assets/javascripts/bootstrap/carousel.js",
"./assets/javascripts/bootstrap/collapse.js",
"./assets/javascripts/bootstrap/dropdown.js",
"./assets/javascripts/bootstrap/modal.js",
"./assets/javascripts/bootstrap/tooltip.js",
"./assets/javascripts/bootstrap/popover.js",
"./assets/javascripts/bootstrap/scrollspy.js",
"./assets/javascripts/bootstrap/tab.js",
"./assets/javascripts/bootstrap/affix.js",
"./assets/fonts/bootstrap/glyphicons-halflings-regular.eot",
"./assets/fonts/bootstrap/glyphicons-halflings-regular.svg",
"./assets/fonts/bootstrap/glyphicons-halflings-regular.ttf",
"./assets/fonts/bootstrap/glyphicons-halflings-regular.woff",
"./assets/fonts/bootstrap/glyphicons-halflings-regular.woff2"
]
}
}
}
Hi,
im tyring to replace bootstrap-saas with the uikit sass framework. I followed this topic recommendations and still didnt manage to make it work with the wiredep stuff.
I still got the bootstrap ref instead of the new uikit ref in the main.scss
Sadly I never got this issue resolved and rather just started another project without using Bower. I’m sure the solution is simple and somebody can give us some advice!
I replicated your issue:
Clean install of Sage in my local dev. environment.
Installed uikit using: bower install uikit --save
Confirmed uikit was added to the Bower file
Made sure to include “main” (uikit has already a a “main” entry
run gulp (or just gulp wiredep)
And still no dependencies injected. I can easily remove add from the default bootstrap and wiredep works, but I can’t seem to do it with any other package.
I just added the path of the ukit in the uikit bower package. What was confusing is that the Bootstrap path in the bower_components is very similar to the path in the actual Sage assets.
After running the wiredep again, I can see the dependency was indeed injected correctly.
Does this make sense? My only question remaining would be that both uikit and bootstrap have a “main” in their respective bower.json files, so why do we have to override that? I thought we only override components with no “main”.
wow well done Mateo ! awesome !
i got your point regarding the path, it is quite unfortunate indeed.
now im fighting to include the uikit javascript lib in the bowerjson as well,
not sure it is suppsed to go there, maybe it is in the manifest.json file to do that operation
Hi Chris!
I’m not able to replicate this issue at this moment. Can you confirm the file are not being loaded? Either in the Chrome Dev Tools (network) or just by:
Type node in the terminal (make sure you are in the sage project folder) once you enter the node environment, type this: require(‘asset-builder’)(’./assets/manifest.json’).globs.js
Take a look at the log and see if the require JS is being added. In my case, the uikit.js was being added under main.
I’m sorry if this does not help, I will try to get around it later on this week. *lol just tested and hm just make sure you declare the js. file int he bower.json as you did with the css file and that should be it!
Make sure you run “gulp build” to get everything together and then if you check the chrome developer tools you shoudl see the script was added to the main. js
