0

我正在使用lightGallery.js,但在覆盖sass 变量时遇到了一些麻烦。我能够成功覆盖的唯一变量是$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

谢谢

4

1 回答 1

0

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

于 2018-01-05T12:46:43.553 回答