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 文件配置

python 复制代码
# 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. 配置

html 复制代码
 {% load sass_tags %}

2. 导入

html 复制代码
<link rel="stylesheet nofollow" type="text/css"  href="{% sass_src 'scss/xxx/xxx.scss' %}">
相关推荐
10年前端老司机10 分钟前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星10 分钟前
vue实现微信聊天emoji表情
前端·javascript
停止重构12 分钟前
【方案】前端UI布局的绝技,响应式布局,多端适配
前端·网页布局·响应式布局·grid布局·网页适配多端
極光未晚13 分钟前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
ze_juejin14 分钟前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
lichenyang45315 分钟前
React项目(移动app)
前端
用户618482402195116 分钟前
Vue-library-start,一个基于Vite的vue组件库开发模板
前端
美团技术团队28 分钟前
报名 | 美团技术沙龙第86期:多业务场景下,美团如何做性能优化
前端
Rrvive1 小时前
localhost 和 127.0.0.1 的核心区别
前端
蓝倾1 小时前
如何使用Python通过API接口批量抓取小红书笔记评论?
前端·后端·api