首页 > 解决方案 > 如何使用 PythonAnywhere 正确链接 SCSS?

问题描述

我目前正在改进我的投资组合,所以我决定完全切换到 SCSS 而不是 CSS。现在,甚至在我从 PyCharm 提交之前,我总是需要对其进行一些编辑,以使其在 PythonAnywhere 中工作。说明:

这是我用来使它在 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/'

现在要在 PythonAnywhere 中进行这项工作,我必须将上面的代码编辑为:

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/'

我认为这就是我无法正确链接 SCSS 文件的问题,是因为 settings.py 中的路径错误。我现在在加载网站时收到此错误: Unable to locate file scss/style.scss while rendering tag 'sass_src' in template project_index.html 当然,相同的代码在 PyCharm 中运行良好,那么我应该如何编辑这些行以使一切在 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')

这是我加载 scss 的代码

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

这是项目树

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

标签: pythondjangosasspythonanywhere

解决方案


在您的 Index.html 中,您应该在浏览器中加载 CSS 文件而不是 SCSS 文件。

Sass 文件编译为您的 CSS 文件,然后您需要链接您的 CSS 文件。

所以我想也许这需要改变为一个例子:

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

我也使用 Pythonanywhere,但使用 Flask,希望这对您有所帮助。


推荐阅读