覆盖 sass 变量的问题

Question

我正在与 lightGallery.js and I have some troubles with overwriting the 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 订单中犯错了吗？我有点懵

我为了让这个 post 简短这里是 github

上 src/sass/lightgallery.scss and src/sass/lg-variables.scss 的链接

谢谢

Answer 1

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

覆盖 sass 变量的问题

troubles with overwriting sass variables

javascript

css

sass

compass-sass

lightgallery