如何在PyCharm中为Django网站覆盖Bootstrap SCSS变量？

一、修复django_sass_compiler模块找不到的问题 #

• 确认虚拟环境：如果使用了虚拟环境，必须先激活环境再执行pip install django-sass-compiler——多数错误是因为包安装到全局Python，而Django运行的虚拟环境未安装该包
• 检查settings.py：确保INSTALLED_APPS中添加的是'django_sass_compiler'（注意是下划线，不是连字符）
• 验证安装：执行pip list，查看列表中是否存在django-sass-compiler，确认版本正确

二、正确的Bootstrap SCSS自定义流程 #

1. 调整项目结构 #

假设项目外层有node_modules（通过npm安装的Bootstrap），在Django项目的static目录下新建scss文件夹，比如myproject/static/scss/custom_bootstrap.scss

2. 编写自定义SCSS文件 #

在custom_bootstrap.scss中先覆盖Bootstrap变量，再导入完整Bootstrap核心文件：

// 自定义Bootstrap变量
$primary: #2563eb; // 替换为你的自定义主色
$body-bg: #f0f4f8;
$border-radius: 0.5rem;

// 导入Bootstrap核心SCSS（路径根据你的node_modules位置调整）
@import "../../../node_modules/bootstrap/scss/bootstrap";

3. 配置django-sass-compiler #

在settings.py中添加以下配置：

# 指定static目录为编译根目录
SASS_COMPILER_ROOT = BASE_DIR / 'static'
# 可选：生成压缩后的CSS文件
SASS_COMPILER_OUTPUT_STYLE = 'compressed'
# 可选：指定CSS输出目录（默认与scss同级的css目录）
# SASS_COMPILER_OUTPUT_DIR = 'css'

4. 编译SCSS文件 #

执行正确的编译命令（工具的命令是compilecss，不是sass-compiler）：

python manage.py compilecss

编译完成后，会在static/css目录下生成custom_bootstrap.css（或压缩版custom_bootstrap.min.css）

三、替换CDN引入为本地编译CSS #

打开base.html，删除Bootstrap的CDN CSS链接，替换为本地编译的文件：

<!-- 移除原CDN链接 -->
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> -->

<!-- 引入本地编译的CSS -->
<link rel="stylesheet" href="{% static 'css/custom_bootstrap.css' %}">

四、PyCharm辅助优化（可选） #

• 开启自动编译：打开Settings → Languages & Frameworks → Stylesheets → Sass，设置输出路径为static/css，勾选"Compile Sass to CSS"，修改SCSS后会自动编译，无需手动执行命令
• 配置Node解释器：在Settings → Languages & Frameworks → Node.js and NPM中指定Node安装路径，确保PyCharm能识别node_modules中的Bootstrap文件

内容的提问来源于stack exchange，提问作者Jordan Regan