How to Fix the ‘Refused to Apply Style’ MIME Type Error in Elementor

Introduction

The Elementor page builder for WordPress is a powerful tool that enables website customization without needing extensive coding knowledge. However, website owners may sometimes encounter a frustrating issue where a CSS file, such as global.css, fails to load due to a MIME type error. This article provides a step-by-step guide on fixing the error “Refused to apply style from ‘…global.css’ because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.”

Understanding the Issue

This error typically occurs when a CSS file is being served with the wrong MIME type. Instead of delivering the file as text/css, the server returns it as text/html. As a result, the browser refuses to apply the style.

Common Causes

• The file is missing or has been deleted.
• Incorrect MIME type settings in the server configuration.
• Cached files causing conflicts.
• Incorrect permissions for CSS files.

Let’s dive into the solutions to fix this error.

Solution 1: Regenerating Elementor CSS Files

One of the easiest ways to fix the issue is to regenerate Elementor’s CSS files.

Steps to Regenerate Elementor CSS Files

1. Log in to your WordPress dashboard.
2. Navigate to Elementor > Tools.
3. Under the General tab, locate Regenerate CSS & Data.
4. Click on Regenerate Files.
5. Clear your cache using a caching plugin like WP Rocket or from your hosting provider’s dashboard.

Why This Works

Regenerating CSS files ensures that any missing or corrupted files are recreated, solving issues related to incorrect file paths or MIME types.

Solution 2: Check File Existence

It’s essential to verify that the global.css file exists in your WordPress installation.

How to Check

1. Connect to your server using an FTP client or your hosting provider’s file manager.
2. Navigate to the following path:

   /wp-content/uploads/elementor/css/

3. Ensure that the global.css file is present.

If the file is missing, regenerating the CSS files will recreate it.

Solution 3: Correct File Permissions

File permission issues can also cause this error. Ensure that the permissions for your CSS files and folders are set correctly.

Recommended Permissions

File/Folder	Recommended Permissions
CSS Files	644
Uploads Folder	755

Commands to Set Permissions (SSH)

chmod 644 /path/to/wp-content/uploads/elementor/css/*.css
chmod 755 /path/to/wp-content/uploads/elementor/css/

Solution 4: Check Nginx MIME Type Configuration

If your server runs on Nginx, incorrect MIME type settings can cause this issue.

Steps to Fix MIME Type in Nginx

1. Open your Nginx configuration file:

   sudo nano /etc/nginx/sites-available/your-site.conf

2. Ensure the following MIME type is included:

   types {
       text/css css;
   }

3. Restart Nginx:

   sudo systemctl restart nginx

Solution 5: Clear Cache and CDN

Cached files can cause conflicts. Clearing the cache ensures that the browser fetches the latest version of the CSS file.

Steps to Clear Cache

• WP Rocket: Go to WP Rocket > Dashboard and click Clear Cache.
• Cloudflare: Log in to your Cloudflare account, select your website, and click Purge Everything.

Key Takeaways

• Regenerate Elementor CSS files if you encounter MIME type errors.
• Ensure the global.css file exists and has the correct permissions.
• Check your server’s MIME type configuration if using Nginx.
• Clear your cache and CDN to avoid conflicts.

FAQ

Q: What causes the MIME type error in Elementor?

A: The error is typically caused by missing or incorrectly configured CSS files, incorrect file permissions, or server MIME type settings.

Q: How do I regenerate Elementor CSS files?

A: Go to your WordPress dashboard, navigate to Elementor > Tools, and click Regenerate Files.

Q: Can I fix this error without accessing my server?

A: Yes, in most cases, regenerating CSS files through the WordPress dashboard and clearing the cache will resolve the issue.

Q: Does this issue affect website performance?

A: Yes, if styles are not applied correctly, it can affect the appearance and functionality of your website.

Conclusion

Fixing the “Refused to apply style” error in Elementor is essential for maintaining your website’s appearance and functionality. By following the steps outlined in this guide, you can resolve the issue quickly and efficiently. Remember to regularly clear your cache and keep your plugins updated to avoid similar problems in the future.