lightGallery.js中Sass变量覆盖异常问题求助

你的判断没错，问题核心确实出在Sass文件的导入顺序上。Sass的!default变量规则是：如果变量已经被定义过，!default就不会再给它赋值。你现在的代码是先导入了lg-variables.scss（此时所有带!default的变量都被初始化了默认值），之后再声明自定义变量，这时候自定义变量根本不会覆盖已经存在的默认值——只有$backdrop-opacity生效可能是因为这个变量在后续导入的lightgallery.scss里又被重新引用了，属于特例。

修正步骤：调整变量声明与导入顺序 #

把你的自定义变量放在所有lightGallery Sass文件导入之前，这样当lg-variables.scss里的!default变量被加载时，会优先使用你已经定义好的值。修改后的/sass/lightgallery.scss应该是这样：

// 第一步：先声明所有需要覆盖的自定义变量
$backdrop-opacity: .02;
$lg-toolbar-bg: rgba(12, 255, 0, 0.45);
// 可以在这里添加其他需要覆盖的变量，比如$lg-icon-color、$lg-thumbnail-bg等等

// 第二步：导入lightGallery的Sass文件
@import "../javascripts/components/lightgallery/sass/lg-variables";
@import "../javascripts/components/lightgallery/sass/lg-mixins";
@import "../javascripts/components/lightgallery/sass/lg-fonts";
@import "../javascripts/components/lightgallery/sass/lg-theme-default";
@import "../javascripts/components/lightgallery/sass/lg-video";
@import "../javascripts/components/lightgallery/sass/lg-autoplay";
@import "../javascripts/components/lightgallery/sass/lg-fullscreen";
@import "../javascripts/components/lightgallery/sass/lightgallery";

额外检查点 #

• 变量名称完全匹配：确认你自定义的变量名和lg-variables.scss里的完全一致（比如大小写、下划线、前缀lg-都不能错），如果拼写有误，覆盖自然不会生效。
• 清理编译缓存：删除stylesheets目录下的旧lightgallery.css文件，重新编译Sass，避免缓存的旧样式影响结果。
• 避免重复导入：检查你的其他Sass文件（比如app.scss）有没有提前导入过lightGallery的变量文件，这会导致你的自定义变量被提前加载的默认值覆盖。

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