search

understrap / understrap

Underscores + Bootstrap = Understrap, the renowned open-source WordPress starter theme.
https://understrap.com
GNU General Public License v3.0
3.04k stars 964 forks source link

How to properly add additional js files #2187

Open ItsLefty opened 5 months ago

ItsLefty commented 5 months ago

Hi there! Having only used oldschool CSS and JS so far, I'm still new to the npm build process. I am trying to add additional JS plugins into my understrap child theme for example headroom.js and I couldn't find newer topics how to achieve this.

Is this the correct approach? In the src/build/rollup.config.js I have added path.resolve( __dirname, '../js/headroom.min.js' ), just before the path.resolve with the custom-javascript file After recompiling, it looks like the additional file is imported into the child-theme.min.js. Then I've tried to call the headroom script in the custom-javascript.js However there is an error saying: Uncaught ReferenceError: Headroom is not defined

If I add the headroom.js file in the WordPress traditional style via wp_enqueue_scripts in the funtions.php everything is working. But then, the js file will be separately loaded into the footer, which is bad because I want to have everything in the child-theme.min.js

Is this an issue with headroom.js or how can I solve this? Thanks in advance!

bacoords commented 5 months ago

If you're seeing Uncaught ReferenceError: Headroom is not defined it means that you'll either need to import Headroom into the build process or else ensure it's loaded on the page and is globally accessible before you try to use it.