我正在使用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
谢谢