How to Add External JS and CSS in Drupal 9 and Drupal 10?

How to Add External JS and CSS in Drupal 9 and Drupal 10?

If you’re working with Drupal 9 or Drupal 10, you may want to add custom JavaScript (JS) or Cascading Style Sheets (CSS) from external sources to improve your website’s functionality and design. Whether you're adding a new feature, changing styles, or integrating third-party libraries, it’s important to know how to properly add these files to your Drupal site.

In this blog, we’ll show you how to easily add external JS and CSS files in both Drupal 9 and 10. We’ll also explain how this can improve your site’s performance and design flexibility.

Why Add External JS and CSS in Drupal?

Before diving into the process, let’s quickly review why you might want to add external JS or CSS:

• Improve Design: Use custom styles or frameworks like Bootstrap.
• Enhance Functionality: Add external JS libraries like jQuery or React.
• Load Optimized Files: Use minified versions for faster load times.

Now, let’s walk through the steps to add external JS and CSS in Drupal.

How to Add External JS and CSS in Drupal 9 and 10?

1. Using the Theme's .libraries.yml File

One of the easiest ways to add JS and CSS to Drupal is by using the .libraries.yml file in your theme.

Steps:

1. Open your theme folder and locate the your_theme.libraries.yml file.

Add your JS and CSS files in the following format:
yaml
CopyEdit
custom_library:

  version: 1.x

  css:

    theme:

      css/custom-styles.css: {}

  js:

    js/custom-script.js: {}

  dependencies:

    - core/jquery

In this example, replace css/custom-styles.css and js/custom-script.js with the paths to your actual external files.

Also read: Drupal Security Checklist: 20 Steps To Protect Your Drupal Website

2. Using the Drupal Theme Settings Page (For Simple CSS)

If you only need to add an external CSS file, Drupal allows you to add it directly from the theme settings page.

Steps:

1. Go to Appearance > Settings for your active theme.
2. Scroll to the "CSS" section and add the URL of your external CSS file.
3. Save the settings, and your CSS will be added globally.

3. Using the hook_theme() Function in a Module (Advanced)

For developers looking for more control, you can use Drupal's hook_theme() function within a custom module to add JS and CSS.

Example Code:

php

CopyEdit

function mymodule_theme($existing, $type, $theme, $path) {

  return array(

    'my_custom_theme' => array(

      'css' => array(

        'theme' => array(

          drupal_get_path('module', 'mymodule') . '/css/custom-styles.css' => array(),

        ),

      ),

      'js' => array(

        drupal_get_path('module', 'mymodule') . '/js/custom-script.js' => array(),

      ),

    ),

  );

}

This method is more advanced but useful for complex projects.

Best Practices for Adding External JS and CSS

• Minify Files: Minifying your JS and CSS files will reduce the file size, helping your website load faster.
• Use HTTPS: Always use HTTPS links for external JS and CSS to improve security and avoid mixed content warnings.
• Load JS Last: If you are using JS that doesn’t impact the initial page load, make sure to load it at the bottom of the page to improve speed.

Also read: How to Improve User Experience with Faceted Search in Drupal

Troubleshooting Common Issues

1. JS or CSS Not Showing: Check if the file paths are correct. Use the browser’s developer tools to see if the file is being loaded.
2. Conflict with Other Libraries: Sometimes, adding external JS can conflict with Drupal’s built-in libraries. In this case, you might need to load the JS in a specific order or modify the .libraries.yml file accordingly.

FAQ

1. How do I add a JavaScript file in Drupal 9?

You can add a JavaScript file by including it in your theme's .libraries.yml file or by using a module. Just make sure to specify the correct file path and add dependencies if needed.

2. How do I add CSS to Drupal 9?

CSS can be added through your theme settings or via the .libraries.yml file in the theme. For more control, you can add it via a custom module.

3. Can I add external JS and CSS from a CDN in Drupal?

Yes, you can add external JS and CSS files from a Content Delivery Network (CDN). Use the same methods outlined above, but point to the URL of the external file instead of uploading it to your site.

4. What is the best way to add JS and CSS in Drupal?

The best method depends on your needs. For simple changes, the theme settings page works well. For more control, using the .libraries.yml file is recommended.

Conclusion

Adding external JS and CSS files to your Drupal 9 or Drupal 10 site can significantly improve your site’s look and functionality. Whether you’re using a theme, a custom module, or a third-party service, it’s important to follow best practices for faster load times and better performance. By following the steps outlined in this guide, you'll be able to successfully add and manage your external resources in no time!

Need help with your Drupal development? Get in touch with Drupalify today, and let our experts assist you in taking your website to the next level!