Frontend - SASS / SCSS 文件使用

目录

一、安装所需依赖

[1. django-compressor](#1. django-compressor)

[2. django-sass-processor](#2. django-sass-processor)

[二、settings.py 文件配置](#二、settings.py 文件配置)

三、html使用

[1. 配置](#1. 配置)

[2. 导入](#2. 导入)

---

一、安装所需依赖

1. django-compressor

2. django-sass-processor

安装依赖，可参考另一篇文章：Backend - 安装依赖（pip 、tar.gz）_python通过tar.gz包安装依赖包-CSDN博客

二、settings.py 文件配置

# settings.py
INSTALLED_APPS = [
      ...
    'sass_processor',
]
STATICFILES_FINDERS = [
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
    'sass_processor.finders.CssFinder',
]
SASS_PROCESSOR_ROOT = os.path.join(BASE_DIR, "luoboPro/static/")
# 或者 SASS_PROCESSOR_ROOT = os.path.join(BASE_DIR,'static','css')

三、html使用

1. 配置

 {% load sass_tags %}

2. 导入

<link rel="stylesheet nofollow" type="text/css"  href="{% sass_src 'scss/xxx/xxx.scss' %}">