我正在开发一个个人项目,并且使用 django。 在这个项目中我喜欢使用 scss/sass 样式文件,但我不知道如何在我的 Django 项目中安装和设置。 任何帮助将不胜感激 谢谢你!
为了在 django 项目中使用 scss 或 sass
在本地计算机上安装 sass/scss,npm 或 Homebrew(我更喜欢 npm)
安装后,您需要将 sass/scss 编译为 css 文件。
为此,运行命令(在 Windows 的 cmd 中)
sass [your scss file location] [where your css file needs to be stored]
例如..
sass source/stylesheets/index.scss build/stylesheets/index.css
如果您使用的是 django,那么您的项目中必须使用 static 文件夹,在这种情况下您应该使用此命令
sass static/scss/index.scss static/css/index.css
每次scss文件发生变化时都需要执行上述命令..
为了摆脱这个问题,请使用 --watch 命令。
sass --watch static/scss/index.scss static/css/index.css
还有更多方法可以做到这一点。您可以使用 Python 或 NPM 处理 scss/sass 文件。如果你不想搞乱node.js,我建议使用python方式(安装django-sass-processor):
查看这份清晰的手册 - 如何通过 Django 轻松使用 SASS/SCSS ,来自 webarchive 或 django-sass-processor。
基本上运行安装:
pip install libsass django-compressor django-sass-processor
添加到配置文件:
INSTALLED_APPS = [
...
'sass_processor',
...
]
STATICFILES_FINDERS = [
'django.contrib.staticfiles.finders.FileSystemFinder',
'django.contrib.staticfiles.finders.AppDirectoriesFinder',
'sass_processor.finders.CssFinder',
]
STATIC_ROOT = BASE_DIR / 'static'
SASS_PROCESSOR_ROOT = STATIC_ROOT
在模板中使用 Django-sass-processor:
在模板内部,加载 django-sass 的库标签并使用 {% sass_src %} 而不是 {% static %} 来加载 SCSS/SASS 样式表。
{% load sass_tags %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{% sass_src 'path/to/file.scss' %}" rel="stylesheet" type="text/css" />
<title>Django Sass</title>
</head>
<body>
<h1>This template's stylesheet was written SASS/SCSS</h1>
</body>
</html>
我同意@kamar,除了在步骤3中它应该在源和输出之间有一个冒号。因此,观看 SCSS 文件并将其编译为 CSS 文件的命令应该是:
sass --watch static/scss/index.scss:static/css/index.css