I have tried to found a way to add modernizr to Sage, but I’m not being able to get it work. My browser debugger keeps saying that Modernizr is not defined.
I have done so far:
bower install --save modernizr (and I did chose version 2.8.2)
In my manifest.json I have:
{ "dependencies": { "main.js": { "files": [ "scripts/main.js" ], "vendor": [ "scripts/modernizr.js" ], "vendor": [ "scripts/vendor/overlaytrigger.js" ], "vendor": [ "scripts/vendor/hamburger.js" ], "main": true }, "main.css": { "files": [ "styles/main.scss" ], "main": true }, "classie.js": { "files": [ "scripts/classie.js" ] }, "customizer.js": { "files": [ "scripts/customizer.js" ] }, "jquery.js": { "bower": ["jquery"] }, "modernizr.js": { "bower": ["modernizr"] } }, "config": { "devUrl": "http://example.dev" } }
In my bower.json
{ "name": "sage", "homepage": "https://roots.io/sage/", "authors": [ "Ben Word <ben@benword.com>" ], "license": "MIT", "private": true, "dependencies": { "modernizr": "2.8.2", "bootstrap-sass": "3.3.6" }, "overrides": { "modernizr": { "main": "./modernizr.js" }, "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" ] } } }
And in my setup.php at the function assets() I have:
wp_enqueue_script('sage/modernizr', Assets\asset_path('scripts/modernizr.js'), ['sage/js'], null, true);
After running gulp I can see in my dist/scripts folder modernizr.js file and in web page source code:
<script type='text/javascript' src='http://example.dev/app/themes/example/dist/scripts/modernizr.js'></script>
But still debugger is saying Modernizr is not defined and script using it is not working.
Please, I need help on this. Thank you!