使用AdminLTE通过SASS自定义样式时，遇Bootstrap文件缺失编译报错求助

问题原因 #

你使用的@import '~bootstrap/scss/functions'是npm包环境下的路径写法（~前缀用于指向node_modules中的包），但你是直接下载AdminLTE压缩包使用，本地不存在node_modules中的bootstrap包，自然找不到对应文件。此外AdminLTE已将Bootstrap核心变量、函数整合到自身SCSS结构中，无需单独导入官方Bootstrap文件。

修正后的代码示例 #

假设你的自定义SCSS文件放在build/scss目录下，调整导入路径为本地文件路径：

// 导入AdminLTE自带的Bootstrap变量和函数
@import './bootstrap-variables';
@import './mixins/functions'; // 根据你的项目结构，确认mixins下是否有functions.scss

// 自定义主题颜色
$custom-color: #00FF00;
$theme-colors: map-merge((
    'custom-color': $custom-color,
), $theme-colors);

// 最后导入AdminLTE主样式文件，确保自定义变量覆盖默认值
@import './adminlte'; // 替换为你实际的AdminLTE主SCSS文件名

关键注意事项 #

• 移除~前缀，使用相对路径指向本地SCSS文件，适配非npm包的本地项目结构。
• 自定义变量必须在导入AdminLTE主样式文件前定义，这样才能正确覆盖默认变量。
• 检查build/scss/mixins目录，确认functions相关文件是否存在（AdminLTE通常将Bootstrap函数整合在此处）。

额外排查步骤 #

• 找到build/scss下的AdminLTE主入口SCSS文件（一般为adminlte.scss），查看其内部导入顺序，确保你的自定义代码在所有AdminLTE核心样式导入之前执行。

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