如何正确使用 PythonAnywhere link SCSS？

Question

我目前正在改进我的投资组合，所以我决定完全切换到 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/'

我认为这就是我无法正确 link 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

Answer 1

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

Sass 文件编译成您的 CSS 文件，然后您需要 link 您的 CSS 文件。

所以我想也许这需要更改为示例：

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

我也使用 Pythonanywhere，但使用 Flask，希望这对你有帮助。

Answer 2

The browsers currently don’t have direct support for Sass/SCSS or any other CSS pre-processor. All Sass/SCSS code compiles back to standard CSS so the browser can actually understand and render the results.

Reference

因此，您应该使用 CSS 文件而不是 SCSS 文件。

您可以使用 node-sass package 将您的 SCSS 代码编译为标准化 CSS 代码，以便浏览器能够真正识别。

如何正确使用 PythonAnywhere link SCSS？

How to properly link SCSS using PythonAnywhere?

python

django

sass

pythonanywhere