Having trouble locating the CSS file when trying to replace bootstrap with Sass?

I'm running into an issue with customizing my bootstrap theme using Sass. After installing Sass and creating both main.scss and main.css files, I imported bootstrap in my main.scss file as per the documentation.

@import "node_modules/bootstrap/scss/bootstrap";

Following the theming guidelines, I tried to overwrite the main.css file by running:

sass main.scss main.css

Then, I set main.css as the stylesheet for my HTML head and removed the bootstrap stylesheet since all styles were now in main.css. However, when I try to run my program, it keeps giving me a 'file not found' error message.

The HTML file is located at:

/User_testing_v10/user_testing/templates/base.html
And the main.css file is located here: /User_testing_v10/main.css

In my HTML file, I've included the link to fetch the main.css file from this location:

<link rel= "stylesheet" href="/User_testing_v10/main.css”>

Not Found: /User_testing_v10/main.css
[23/Jan/2020 11:02:30] "GET /User_testing_v10/main.css HTTP/1.1" 404 2350

What am I missing here? Do I need to add something like static or specify a different path?

Any assistance would be greatly appreciated. Thanks for taking the time to read through my query.

Answer №1

Modify the Route as Follows

<link rel= "stylesheet" href="../../main.css">

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

Code in JavaScript that shows only a portion of the selected option in a dropdown menu

I'm just starting to learn Javascript and I'm looking to create a script for a select tag that displays countries and their phone codes. My goal is to have the dropdown menu show both the country and code, but once the user selects an option, onl ...

Toggling a div updates the content of a different div

I am looking to make the content within <div class="tcw-content"> dynamically change when a different div is clicked. I have little experience with Ajax, so I'm wondering if there are alternative ways to accomplish this using JS/CSS. If anyone h ...

In the world of web development, the concept of Django Static

I am working with a model called Student that has many fields, as well as a model called Document which includes a ForeignKey linking it to the Student model. I am using an inline method to edit the associated Documents of the Students. In my models.py fi ...

Flawless 2D mouse selection using Canvas for pixel-perfect accuracy

Currently, I am developing a 2D game in HTML5 using Canvas that requires precise detection of mouse click and hover events. The main challenges I am facing include the need for pixel-perfect detections, working with non-rectangular objects such as houses a ...

Personalize the contrast of text color in buttons using bootstrap 5

Using bootstrap.build has been a smooth experience for customizing Bootstrap 5 so far. However, when I switched to a React project, things started going wrong. The text inside the buttons turned black and the outline button had the same issue on hover. h ...

What is the best way to design a layout utilizing the "display: inline-block, block, or inline" properties in a style sheet?

https://i.sstatic.net/IqsRt.jpg Currently facing an issue with incorrect output. Code Snippet: <!DOCTYPE html> <html> <head> <style> .largebox { display: block; margin: 10px; border: 3px solid #73AD21; } .box1 { disp ...

There are various buttons available for users to choose from on a page. How can I retrieve this selection data in JSON format?

I am designing a quiz with HTML buttons as options. How can I capture the user-selected button data before they click 'next' and format it into JSON? As there are multiple pages of questions, the data needs to be dynamically added to the JSON unt ...

Obtaining attribute from an object using JQuery

I am experiencing an issue with extracting the innerHTML from an object. The code I currently have is as follows: console.log( $(myString).find("#" + someID).prevObject ); The variable myString contains HTML code in string format someID represents the ...

A guide on utilizing queryset filters to access foreign fields with dual filters

Consider the following models implemented: class Pair(models.Model): user = models.ForeignKey(User) institution = models.ForeignKey(Institution) class Institution(models.Model): name = models.CharField(max_length=250) class User(AbstractBase ...

How can I prevent b-table in BootStrap Table from automatically re-sorting after updating the data?

Once the b-table is sorted, any modifications to the table's data will trigger an automatic re-sorting. Is there a way to prevent the b-table from immediately re-sorting upon data updates? ...

I would like to smoothly fade in and out the text within the anchor tag, creating a subtle and gentle effect

My bootstrap navigation bar has icons that transition to text when hovered over, but the change is too abrupt. I would like it to appear more smoothly and gradually, similar to the effect on this website This is an example of my HTML code: <nav cla ...

Displaying videos on GitHub pages is not functioning properly and shows no content

I'm currently facing a problem with embedding videos on my GitHub pages. Whenever I try to play the video, an error message pops up. Here is the HTML code I am using: <div class="row video"> <iframe id="video" width=&qu ...

`Dynamic assortment displaying menu`

I am currently developing a compact application that requires a list of 5 items: Name Address City Country Zipcode Whenever a user clicks on any of these items, they should be redirected to another page where that specific item is highlighted. ...

Angular4 - Div with ngIf doesn't respond to click event

I'm attempting to add a click event to a specific div. Within this div, there is another div that is dynamically generated based on a Boolean condition that I receive as input. Unfortunately, in this case, the click event is only functioning when clic ...

Guide on converting HTML datetime picker datetime-local to moment format

I am looking to convert an input type : <input type="datetime-local" name="sdTime" id="stTimeID" onChange={this.stDateTime} /> into a specific date format: const dateFormat = 'MM/DD/YYYY hh:mm:ss a'; To achieve this, I need to transfer ...

When the "ok" button is clicked in a custom confirmation box, the function will return

When the first button is clicked, I validate certain text boxes and then call Confirm() to display a confirmation box. I want it to return true to the calling function when "ok" is clicked and for control to go back to the UI to proceed ...

Issue with Django REST - JSON data contains backslashes (possibly due to serialization being applied multiple times)

After defining the following function in the backend to obtain JSON responses, I encountered some interesting behaviors. def create(self, request, *args, **kwargs): import requests import json url = request.POST.get('url') r = req ...

Django: Troubleshooting video display issues in template (Encountering error message "No supported video format and MIME type detected")

Despite following multiple online resources, I encountered an error ("No video with supported format and MIME type found") in a page where users can perform various actions, including uploading a video. Here are my settings for MEDIA_ROOT and MEDIA_URL in ...

storing multiple values in a single column of a PHP table

I am facing an issue while trying to generate a PDF from two tables in my database: 'book' and 'author'. The problem arises when a book has more than one author, as I am unable to display them in a single column. Below are images showin ...

Slick slider malfunctioning within bootstrap 4 framework

Despite following the instructions on the official slick slider website, I am encountering an issue where the slider is not working as expected. Instead of sliding through the images, they are being displayed on top of each other. Here is the code I have ...