覆盖 sass 变量的问题

Question

我正在使用lightGallery.js，但在覆盖sass variables 时遇到了一些麻烦。我能够成功覆盖的唯一变量是$backdrop-opacity lg-variables.scss 中的所有其他变量都没有生效。

/static树形结构

├── config.rb
├── fonts
│   ├── lg.eot
│   ├── lg.svg
│   ├── lg.ttf
│   ├── lg.woff
│   ├── app-font.eot
│   ├── app-font.woff
│   └── app-font.woff2
├── images
│   └── logo.svg
├── javascripts
│   ├── components
│   │   └── lightgallery
│   │       ├── css
│   │       │   ├── lg-fb-comment-box.css
│   │       │   ├── lg-fb-comment-box.css.map
│   │       │   ├── lg-fb-comment-box.min.css
│   │       │   ├── lg-transitions.css
│   │       │   ├── lg-transitions.css.map
│   │       │   ├── lg-transitions.min.css
│   │       │   ├── lightgallery.css
│   │       │   ├── lightgallery.css.map
│   │       │   └── lightgallery.min.css
│   │       ├── fonts
│   │       │   ├── lg.eot
│   │       │   ├── lg.svg
│   │       │   ├── lg.ttf
│   │       │   └── lg.woff
│   │       ├── img
│   │       │   ├── loading.gif
│   │       │   ├── video-play.png
│   │       │   ├── vimeo-play.png
│   │       │   └── youtube-play.png
│   │       ├── js
│   │       │   ├── lightgallery.js
│   │       │   ├── lightgallery.min.js
│   │       │   └── plugins
│   │       │       ├── lg-autoplay.min.js
│   │       │       ├── lg-fullscreen.min.js
│   │       │       └── lg-video.min.js
│   │       └── sass
│   │           ├── lg-animations.scss
│   │           ├── lg-autoplay.scss
│   │           ├── lg-fb-comment-box.scss
│   │           ├── lg-fonts.scss
│   │           ├── lg-fullscreen.scss
│   │           ├── lg-mixins.scss
│   │           ├── lg-pager.scss
│   │           ├── lg-share.scss
│   │           ├── lg-theme-default.scss
│   │           ├── lg-thumbnail.scss
│   │           ├── lg-transitions.scss
│   │           ├── lg-variables.scss
│   │           ├── lg-video.scss
│   │           ├── lg-zoom.scss
│   │           ├── lightgallery.scss
│   │           └── prepros.cfg
│   └── app.js
├── sass
│   ├── _base.scss
│   ├── app.scss
│   ├── _fonts.scss
│   └── lightgallery.scss
└── stylesheets
    ├── app.css
    └── lightgallery.css

/sass/lightgallery.scss文件

@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";

$backdrop-opacity: .02;

@import "../javascripts/components/lightgallery/sass/lightgallery";

无论我在$backdrop-opacity 之后添加什么变量，比如$lg-toolbar-bg: rgba(12, 255, 0, 0.45);，它的值都不会改变默认的$lg-toolbar-bg: rgba(0, 0, 0, 0.45) !default;

我在@import 订单中犯了错误吗？我有点不知所措。

我想让这篇文章简短一些，这里是 github 上 src/sass/lightgallery.scss 和 src/sass/lg-variables.scss 的链接

谢谢

Answer 1

你的变量$backdrop-opacity 没有在https://github.com/sachinchoolur/lightgallery.js/blob/master/src/sass/lightgallery.scss 中再次声明你设置了一次，它被使用了一次。