How to properly link SCSS using PythonAnywhere?

Question

I am currently working on revamping my portfolio, so I decided to switch fully to SCSS instead of CSS. Now even before when I commit from PyCharm I always need to edit it a little bit, to make it work in PythonAnywhere. The explanation:

This is the code I use to make it work in PyCharm

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), 'static')
STATIC_URL = '/static/'

STATICFILES_DIRS = (
   os.path.join(BASE_DIR, 'static'),
)

MEDIA_ROOT = os.path.join(BASE_DIR, 'static')
MEDIA_URL = '/media/'

Now to make this work in PythonAnywhere I have to edit above code to this:

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['portfolio/templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

MEDIA_ROOT = u'/home/Gromis/portfolio/media'
MEDIA_URL = '/media/'

STATIC_ROOT = u'/home/Gromis/portfolio/static'
STATIC_URL = '/static/'

I think that is the issue why I can't properly link SCSS file, is because of the wrong path in settings.py . I get this error now while loading the website: Unable to locate file scss/style.scss while rendering tag 'sass_src' in template project_index.html Of course, the same code works perfectly in PyCharm, so how should I edit these lines to make everything work in PythonAnywhere?

STATICFILES_FINDERS = [
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'sass_processor.finders.CssFinder',
]
# SASS_PROCESSOR_ROOT = os.path.join(BASE_DIR, 'static')

This is the code where I load scss

{% load sass_tags %}
<link rel="stylesheet" href="{% sass_src 'scss/style.scss' %}" type="text/css"/>

This is the project tree

portfolio
├── README.md
├── db.sqlite3
├── manage.py
├── media
├── myportfolio
│   ├── __init__.py
│   ├── __pycache__
│   ├── admin.py
│   ├── apps.py
│   ├── models.py
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── portfolio
│   ├── __init__.py
│   ├── __pycache__
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── requirements.txt
├── static
│   ├── admin
│   ├── brand.png
│   ├── myportfolio
│   │   ├── css
│   │   │   └── style.css
│   │   ├── img
│   │   └── js
│   │       └── main.js
│   ├── project3.png
│   ├── scss
│   │   ├── style.css
│   │   ├── style.css.map
│   │   └── style.scss
│   └── swiper
│       └── swiper.js
└── templates
    ├── base.html
    ├── project_detail.html
    └── project_index.html

Answer 1

In your Index.html you should have the CSS file loading in the browser instead of the SCSS file.

The Sass file compiles to your CSS file and then you need to link your CSS file.

So I guess that maybe this needs to change to as an example:

<link rel=”stylesheet” href=”{% static ‘css/styles.css’ %}”>

I use Pythonanywhere also, but with Flask, Hope this helps you.