The file you are trying to import, bootstrap-sass, cannot be located or is unreadable

Experimenting with Django Shop and following a tutorial that can be found here: (stable version).

After starting the server and navigating to localhost, the following error message is displayed:

Error: File to import not found or unreadable: bootstrap-sass/assets/stylesheets/bootstrap/variables.
       Parent style sheet: /home/vm/PycharmProjects/Django-shop/django-shop/shop/static/shop/css/_variables.scss
        on line 1 of ../shop/static/shop/css/_variables.scss
>> @import "bootstrap-sass/assets/stylesheets/bootstrap/variables";

I believe that the missing "bootstrap-sass" directory should be located within the "css" folder, but it is not present there.

This issue only occurs on the front end of the website. I am able to access the admin panel without any problems.

cssdjangobootstrap-4django-shop

Answer №1

The issue highlighted in the comment stating 

No module named 'django.core.urlresolvers'
indicates a potential compatibility problem with Django. For more insights into this error, you can check out this discussion on Stackoverflow, focusing on changes between Django 1.x and 2.x versions. Understanding this conflict, it's essential to consult the Compatibility Table, revealing that Django Shop is currently incompatible with Django 2.x versions. When installing Django via pip, the latest version (2.1) is automatically downloaded, leading to conflicts. To resolve this, consider downgrading Django to a compatible version such as 1.11 for seamless integration with Django Shop 0.13.x.

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

What is the best way to center a button element horizontally within a div element?

I am looking for a way to center a button horizontally without adding CSS directly to the div element (for example, using <div style="text-align: center;">). My goal is to apply CSS code specifically to the button element. <div> <butto ...

htmlcsscentertext-alignmenttext-align

Hide, show, toggle, or empty elements using jQuery

I am having trouble getting this jQuery code to function properly. Within a div, there is a paragraph that I want to hide when a specific button is clicked and show when another button is clicked. Check out the code here $("#details").on("c ...

jqueryhtmlcss

Display a remote page on hover using Javascript, CSS, and HTML without providing any clickable link

How can I display a preview of another page within a div container without actually making the text clickable? I want the preview to show when the mouse hovers over specific text, but I need the original text to stay on the main page. I've experiment ...

javascriptjqueryhtmlcss

css code for styling html elements

HTML: <link rel="stylesheet" type="text/css" href="styles.css"><table border="0" cellpadding="0" cellspacing="0" class="month"> <tr><th colspan="7" class="month">January 2017</th></tr> <tr><th class="mon">Mo ...

htmlcss

Step-by-step guide to implementing a sticky header while scrolling

How can I implement a fixed header on scroll, like the one seen on this website: www.avauntmagazine.com Here is the HTML for my header: <div class="bloc bgc-wild-blue-yonder l-bloc " id="bloc-1"> <div class="container bloc-sm"> &l ...

javascripthtmlcss

Learn how to achieve a sleek animation similar to the famous "Ken Burns effect" by utilizing the CSS property "transform" instead of "object-position". Check out the demo to see it in action!

I am currently exploring how to create an animation similar to the "Ken Burns" effect using CSS transform properties. While I have been using object-position to animate, I am facing challenges with the fluidity of the movement. I am seeking help to achiev ...

javascripthtmlcsscss-animations

Tips for preventing an element from scrolling horizontally along with the page body

This is the structure of my HTML: <div class='header-wrapper'> <div class='title'>Title</div> </div> <div class='some-wide-content'> </div> Let's imagine a scenario where the br ...

htmlcss

Guide to making a dynamic image map with interactive links using HTML and CSS

Seeking advice on how to create clickable areas within an image that lead to different pages on my website. Image maps seem like a good solution, but the issue is that they require specific coordinates which may not work well for responsiveness. I was hop ...

htmlcssimagemap

"Enhancing iPhone User Experience with CSS Hover Effects

I am experiencing an issue with my website where the hover functionality works perfectly on all devices except for iPhones. On an iPhone, users have to continuously press the screen until the hover transition completes in order to view the information. I ...

iosiphonecsshoveruser-agent

Interactive Navigation Bar in JavaScript

Is there a way to create a horizontal menu with an arrow that follows the mouse cursor? I saw this effect on a website (http://cartubank.ge) and I'm curious if anyone has the source code for it? Your help would be greatly appreciated. ...

javascripthtmlcssdhtml

I'm curious, do you happen to know the location of the Django

I keep encountering an issue. Most people suggest looking at the migrations folder, but I can't seem to locate it anywhere. Karls-Mac-mini:django_test karl$ tree ├── django_test │ ├── __init__.py │ ├── __pycache__ │ │ ...

djangomigration

Photo displayed above the carousel using Bootstrap

I'm currently in the process of building a website using the template found at . However, I'm having trouble placing an image in the center of the carousel, above the slides. Here is the code snippet I have tried so far: <div style="positi ...

jqueryhtmlcsstwitter-bootstrap-3

BS4 Dynamic Countdown Clock

I have successfully integrated a countdown timer into my website, utilizing the following HTML code: <div id="clockdiv"> <div> <span class="days"></span> <div class="smalltext">Days</ ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

Make sure to blur all images whenever one of them is clicked

I am currently facing an issue with my webpage where I have 3 images displayed. I have implemented an event listener to detect clicks on the images, and once a click occurs on one of them, I want everything else on the page to become blurred, including the ...

javascripthtmlcss

The Angular overlay is concealed beneath the pinned header

I am seeking a solution to have a mat-spinner displayed on top of my app while it is in the loading state. Currently, I am using an overlay component with Overlay from @angular/cdk/overlay. The issue arises when part of the spinner that should be overlai ...

htmlcssangular

Encountering an issue when attempting to save two forms within a single template in

Currently, I am working on a view that contains 2 separate forms. These forms do not share any related fields. Form 1: Includes a FilteredSelectMultiple widget displaying files available for download from an FTP server. Each file in this form meets certai ...

pythondjangodjango-formsdjango-views

Using a numeral within a Font Awesome icon symbol to customize a label for a Google Maps marker

I have a Google Maps marker displayed below, applying a Font Awesome icon as the label/icon. However, I am unsure how to a.) change the color of the marker and b.) include a number inside the marker. Referencing this Stack Overflow post This is the code ...

javascripthtmlcssgoogle-mapsgoogle-maps-markers

Different Div Sizes Based on Device Type (Bootstrap)

I am currently working on a Bootstrap 3 website and have several small divs displayed on the page. I want to adjust their size for desktop view and make them full width for mobile view. Here is my approach: I attempted to place each small div within a co ...

htmlcsstwitter-bootstrap

Using jQuery to submit data via POST method without having the page reload

I have a link in the footer that, when clicked, jumps to the header with a # in the address bar. Is there a way to prevent this and stay in the footer? Here is the code snippet: <a href="#" class="clickIn" id="1" attrIn="Like"><span style="color ...

javascriptjquerycssajax

Adjust the height of a sibling div using JavaScript with mouseover event

I need assistance with creating an audio visualizer effect where on mouseover, "this" div becomes the tallest one and the other divs adjust their heights accordingly. How can I specify the specific height for each sister div to change to? Code window ...

javascriptjqueryhtmlcss