如何在django中设置scss/sass文件?

问题描述 投票:0回答:3

我正在开发一个个人项目,并且使用 django。 在这个项目中我喜欢使用 scss/sass 样式文件,但我不知道如何在我的 Django 项目中安装和设置。 任何帮助将不胜感激 谢谢你!

django bootstrap-4 sass
3个回答
3
投票

为了在 django 项目中使用 scss 或 sass

第1步:

在本地计算机上安装 sass/scss,npm 或 Homebrew(我更喜欢 npm)

sass安装指南

第2步:

安装后,您需要将 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

步骤3:

每次scss文件发生变化时都需要执行上述命令..
为了摆脱这个问题,请使用 --watch 命令。

sass --watch static/scss/index.scss static/css/index.css

0
投票

还有更多方法可以做到这一点。您可以使用 Python 或 NPM 处理 scss/sass 文件。如果你不想搞乱node.js,我建议使用python方式(安装django-sass-processor):

查看这份清晰的手册 - 如何通过 Django 轻松使用 SASS/SCSS ,来自 webarchivedjango-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>

0
投票

我同意@kamar,除了在步骤3中它应该在源和输出之间有一个冒号。因此,观看 SCSS 文件并将其编译为 CSS 文件的命令应该是:

sass --watch static/scss/index.scss:static/css/index.css
© www.soinside.com 2019 - 2024. All rights reserved.