Roots Discourse

Which way is the correct way to include extra JS files in Sage 9?

I am trying to include a JS file for Owl Carousel 2 into my Sage 9 project however I am not using Yarn/NPM to include this JS file I have simply downloaded the file and now I want to include it into my main.js. Which method would be the correct way of including this file to my main.js file? With Sage 8 I would have just used Bower and it would have included it into my project for me.

Thanks

Add the file to /assets/config.json

For example, here is what mine looks look

 "entry": {
        "main": [
            "./scripts/main.js",
            "./styles/main.scss"
        ],
        "customizer": [
            "./scripts/customizer.js"
        ],
        "story-creator": [
            "./scripts/story-creator.js"
        ]

    },

Where 'story-creator.js is the custom js file to be added.

Then yarn run build

And then enqueue the file from src/setup.php

I believe this is covered pretty well in the docs https://github.com/roots/docs/blob/sage-9/sage/theme-development-and-building.md

1 Like

I thought that enqueueing the file would output it into the dist as a separate file but I am guessing I was wrong.

I was wondering if you had any issues sometimes with using JUST custom js, but enqueuing main.css on one custom page template for example.

if (is_page_template('views/template-faq.blade.php')) {
        wp_enqueue_style('sage/main.css', asset_path('styles/main.css'), false, null);
        wp_enqueue_script('sage/faq.js', asset_path('scripts/faq.js'), ['jquery'], null, true);
}

This for example always doesnt work, styles are not applied and there’s syntax error in faq.js supposedly. Then I just use a copy of main.scss but name it faq.scss and it works.

Any ideas?