django project: template with missing node_modules in static folder

I have obtained a template example that I would like to use in my Django project. I have organized all of my static files within the static folder and made the necessary modifications in settings.py. However, I am encountering an issue with the following line:

<link rel="stylesheet" href="{% static 'node_modules/mdi/css/materialdesignicons.min.css' %}">

When this line is executed, it translates to:

<link rel="stylesheet" href="/static/node_modules/mdi/css/materialdesignicons.min.css">

The specified path does not exist in my static folder. Since I am unfamiliar with node.js, I am unsure how to configure my HTML page to display exactly as it was originally intended. Currently, none of the supporting files from the static directory are being loaded properly.

htmlcssnode.jsdjangofrontend

Answer №1

To include the staticfiles in your project, add {% load staticfiles %} at the beginning of your page and adjust your import statement like so

{% load staticfiles %}


<link rel="stylesheet" href="{% static 'node_modules/mdi/css/materialdesignicons.min.css' %}">

Don't forget to run the collectstatic command if DEBUG is set to FALSE

python manage.py collectstatic

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Storing data with ElectronJS

I am currently working on an Electron JS and React JS offline application. One of the initial steps in my launch process involves loading a large file that is over 1 GB in size and cannot be divided. This causes a delay of approximately 50-60 seconds whi ...

javascriptnode.jselectronservice-worker

Sending data through forms

I'm having trouble storing values input through a dropdown menu in variables event1 and event2, despite trying global declarations. How can I successfully store a value to both variables and pass it to the JavaScript code? Thank you. <!DOCTYPE HT ...

javascripthtmlcssforms

Navigating through a modal without affecting the main page's scroll position

My webpage has some content, and I also have a modal that pops up on top of it. The problem I'm facing is that when I try to scroll the contents within the modal, only the contents behind it scroll instead. Below is the CSS code: html, body { b ...

htmlcssmodal-dialog

JavaScript form validation issue unresolved

When I attempt to validate form fields using Javascript functions, they seem to not load or check the field upon clicking the submit button. <html> <body> <?php require_once('logic.php'); ?> <h1>New Region/Entit ...

phpjavascripthtmlformsvalidation

Display a division when an option is selected within a looped dataset

i am working with some PHP code: <?php $produk = mysql_query("SELECT * FROM produk ORDER BY id_produk DESC"); while($p=mysql_fetch_array($produk)){ <select name='urutan' onChange='yesnoCheck(this);'> <option va ...

phpjqueryhtmlmysqlajax

What is the best way to pass node arguments while using pm2 on a Windows operating system?

On Ubuntu, the pm2 start command works perfectly. However, I'm encountering an issue on Windows where the node-args are not being passed in the same way. How can I resolve this? pm2 start --node-args="--experimental-modules" app.js Here is the error ...

node.jspm2

Are buttons continuously added on top of each other?

It seems that the root of my problem lies in my use of ng-repeat, so I won't go into too much detail on the rest but feel free to ask for more information. Indeed, I am employing ng-repeat to iterate over a certain number of div elements stored in an ...

javascripthtmlcssangularjs

Troubleshooting: Issue with jQuery not retrieving the value of input:nth-child(n)

My goal is to dynamically change the price when the model number changes, requiring the id number and quantity to calculate it accurately. Here is the HTML code I have: <div class="col-sm-9 topnav"> <span> ...

javascriptjqueryhtmlcss-selectors

What is the best way to verify if a user is logged in using Passport and Discord OAuth2 with the EJS framework?

How can I verify if a user is logged in using EJS, Passport, and Discord OAuth2? I am attempting to display different navigation bars and footers depending on whether the user is logged in or not, but I keep encountering numerous errors and frustrations. ...

node.jsexpressoauth-2.0discordejs

sass-loader Unable to locate @import url

Currently, I am working on a project using nuxt.js in conjunction with fastify.js (fastify-vue-plugin), and I am in the process of configuring my styling. Although the scss compiles smoothly and functions correctly, I am facing an issue during the build p ...

node.jsnpmsassnuxt.js

How can I ensure that the position of an image within a button remains fixed as the button's width expands upon hovering?

Whenever I hover over the button, it changes width as intended but the image shifts towards the center. My goal is to keep it fixed on the left so it doesn't shift when the button's width changes. Below is my React code: <div> < ...

htmlcssreactjs

Setting a CSS grid column to have a minimum width of `max-content` and a specific

I am trying to create a CSS grid where the column widths adjust based on the content, but with a minimum width of 100px. I attempted using minmax(max-content, 100px), however it did not produce the desired result. In the example below, the narrow column sh ...

htmlcsscss-gridmin

Disabling vertical scrollbar in textarea within Bootstrap modal using CSS, jQuery, and C# in .NET MVC framework

I am passing data to the Bootstrap modal using jQuery from my database. The form values can change from a single row to multiple rows. I do not want a scrollbar, but instead I want the textarea element to automatically adjust its height to fit the content. ...

javascriptjquerycsstwitter-bootstrapbootstrap-4

Adjust the width of columns by simply clicking in Angular

I am working on a page with two buttons split into two columns using col-md-6. I want to make it so that when one button is clicked, the first button becomes col-md-9 and the other becomes col-md-3, and vice versa. However, I am unsure of how to achieve t ...

htmlangulartypescriptbootstrap-4

Running the command "npm start" is resulting in an error message stating: "ENOENT: no such file or directory ... package.json"

After successfully creating a React app using NPX, I encountered an issue when trying to run npm start. The error message that appeared is as follows: $ npm start npm ERR! code ENOENT npm ERR! syscall open npm ERR! path C:\Users\Administrateur.TE ...

javascriptnode.jsreactjsnpmnpx

The NODE.JS application becomes unresponsive when attempting to retrieve 2.5 million records from an API

I'm facing an issue where my app is retrieving millions of rows from a database and API, causing it to get stuck after calling the getData() function. let closedOrdersStartDate; preparedOrdersPromise = tickApiConnector.obtainT ...

javascriptnode.jsmemory-leaksprofilingcpu

PHP not being serialized by msgpack or messagepack

My goal is to fetch session variables that have been set via PHP and stored in Memcached using Node.js. I would prefer the format of these session data to be in JSON. I came across Msgpack which seemed like a possible solution, but when I looked at the s ...

phpnode.jssessionmsgpackmessagepack

Retrieve the imported object by referencing the environment

Within my TypeScript Node application, I am looking to access the exported object that corresponds to my NODE_ENV variable. config.ts const test: { [index: string]: any } = { param1: "x", param2: { name: "John" } } const dev: { [index ...

node.jstypescript

How can I move one of the multiple input fields to the top right side?

I am facing an issue and need some assistance. I have created a page with multiple font controls, but in my prototype design, there is a field on the right side where the inputs are positioned at the top and on the right. How can I achieve this? I have cr ...

htmlcssbootstrap-5

Tips for concealing the preceding list item using jQuery

I am currently working on a project that involves a ul tag with 5 li items. My goal is to display each item one by one when a button is clicked. This would mean showing the next item and hiding the previous one, similar to what happens in quizzes. Here i ...

javascriptjqueryhtmlcss