Javascript file make css not to work in django

Using Django
1

When i include the js file in base.html <script src="static/assets/js/functions.js"></script> the CSS stops working entirely but when i remove the JS file or comment it out the CSS start loading and rendering well. I even tried putting the whole js code manually into the base.html but it still doesnt work i dont really know what to do right now.

base.html

<head>
    <title>Eduport - LMS, Education and Course Theme</title>

    <!-- Meta Tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="author" content="Webestica.com">
    <meta name="description" content="Eduport- LMS, Education and Course Theme">

    <!-- Favicon -->
    <link rel="shortcut icon" href="{% static 'assets/images/logo.svg' %}">

    <!-- Google Font -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap">

    <!-- Plugins CSS -->
    <link rel="stylesheet" type="text/css" href="{% static 'assets/vendor/font-awesome/css/all.min.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'assets/vendor/bootstrap-icons/bootstrap-icons.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'assets/vendor/tiny-slider/tiny-slider.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'assets/vendor/glightbox/css/glightbox.css' %}">

    <!-- Theme CSS -->
    <link id="style-switch" rel="stylesheet" type="text/css" href="{% static 'assets/css/style.css' %}">

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-7N7LGGGWT1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }
        gtag('js', new Date());

        gtag('config', 'G-7N7LGGGWT1');
    </script>

</head>






<!-- Footer -->
<!-- Bootstrap JS -->
<script src="{% static 'assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js' %}"></script>

<!-- Vendors -->
<script src="{% static 'assets/vendor/tiny-slider/tiny-slider.js' %}"></script>
<script src="{% static 'assets/vendor/glightbox/js/glightbox.js' %}"></script>
<script src="{% static 'assets/vendor/purecounterjs/dist/purecounter_vanilla.js' %}"></script>

<!-- Template Functions -->
<script src="static/assets/js/functions.js"></script>

The JS and CSS Files are located in a static folder in root directly and i’m sure there is not typo or anything not well arranged

2

Right offhand, this seems to be more a Browser / JS / CSS issue than a Django issue - you might find more direct assistance in a forum for either JS or CSS.

Beyond that, we’d probably need to see that JS file.

You might also want to use your browsers developer tools to look at your page to see what CSS is being applied to some of the elements on that page. That might give you some hints as to what’s going on here. (And while I doubt this is the case, it’ll also help you determine whether the JS is blocking the CSS somehow or if the CSS is being loaded and then ignored.)

3

okay, i’ll do that right away. Thanks alot for your response!!!

4

i feel like it’s a django problem, becuase the js and css files work fine when i just run the index.html normally without django, just normal html, css, js. It work fine. But when i install django it stops working, and let me be clear with what happening, when i refresh the page it loads everything well for the first 1 second and the js and css clears out again and stops rendering

5

Then it’s definitely not Django.

Once the response is being sent back to the client, Django is done - it is no longer involved in any way.

Something in that JavaScript is disabling the CSS.

6

i just viewed the chrome inspect console now and this is what i’m seeing

Failed to load resource: the server responded with a status of 404 (Not Found)
rightclick.js:25 allow right click processing http://127.0.0.1:8000/
new_rightclick.js:87 Uncaught TypeError: event.cancelBubble is not a function
    at HTMLDocument.bringBackDefault (new_rightclick.js:87)
css2%3Ffamily%3DHeeb…%26display%3Dswap:1 Failed to load resource: the server responded with a status of 500 (Internal Server Error)
127.0.0.1/:1 Refused to apply style from 'http://127.0.0.1:8000/assets/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
DevTools failed to load source map: Could not load content for http://127.0.0.1:8000/static/assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

i don’t know is this gives a hint, because i can see Refused to apply style from 'http://127.0.0.1:8000/assets/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled

7

Hi,
I was facing same kind of error last night :slight_smile:

It was by some improper importing of css file

@import url("../../../../../../../cdn.jsdelivr.net/npm/bootstrap-icons%401.3.0/font/bootstrap-icons.css");

Replaced using following line and worked for me

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css");

I guess its because of improper import or link

8

We’ll need to see the JavaScript file for further diagnosis. This isn’t a Django issue, there is something incorrect in the JS file.

9

I see now, it not a django issue. When i copy the css file and hard code it into my index.html it starts working. Maybe for now, i’d stick with that, but the css is a whole lot of code over 25,000 lines. I know it a wrong way of doing it