Revamp SCSS with better variables and extensions

[flo-sch]

Prerequisites

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• The issue still exists against the latest master branch of bootstrap-fileinput.
• This is not an usage question. I confirm having read the plugin documentation and demos.
• This is not a general programming / coding question. (Those should be directed to the webtips Q & A forum).
• I have attempted to find the simplest possible steps to reproduce the issue.
• I have included a failing test as a pull request (Optional).

Steps to reproduce the issue

1. Set-up webpack with sass-loader
2. Import the sass file from any stylesheet :

// vendor.scss
$bootstrap-fileinput-img-path: '~bootstrap-fileinput/img';
@import '~bootstrap-fileinput/sass/fileinput';

Expected behavior and actual behavior

When I follow those steps, webpack cannot compile the sass file, as one of the loading.gif reference is hardcoded, and does not use the $bootstrap-fileinput-img-path variable.

Module not found: Error: Can't resolve '../img/loading.gif'

I was expecting webpack to compile it properly with such as variable.

Could you please replace url('../img/loading.gif') by url('#{$bootstrap-fileinput-img-path}/loading.gif') here ?

https://github.com/kartik-v/bootstrap-fileinput/blob/v4.4.4/sass/fileinput.scss#L64

Environment

Browsers

• Google Chrome
• Mozilla Firefox
• Internet Explorer
• Safari

Operating System

• Windows
• Mac OS X
• Linux
• Mobile

Libraries

• jQuery version: N/A
• bootstrap version : 4.0
• bootstrap-fileinput version: 4.4.4

Isolating the problem

(Style only, not a JavaScript problem)

• This bug happens on the plugin demos page
• The bug happens consistently across all tested browsers
• This bug happens when using bootstrap-fileinput without other plugins
• I can reproduce this bug in a jsbin

[flo-sch]

NB : an alternative would be to load this gif with base64 data, as bootstrap already does such things, what do you think?

https://github.com/twbs/bootstrap/blob/v4.0.0-beta/scss/_variables.scss#L426

[kartik-v]

Nice input. Will look into this.

[flo-sch]

Great :)

Thanks for the plugin BTW!

I could create a PR for such a case, but many things seem to be changing in sass styles on branch master, so I'd prefer not to interrupt ;

However if you need me, just ask :)

[kartik-v]

Currently revamped the SCSS definitions... not embedding images yet but linking them through variables... the sizes will be a bit on higher side for the small gif loaders when used as SVG embeds.

[flo-sch]

Great, thanks :)

Can you please add a !default statement for the variables, so we can override them?

$url_0: url(../img/loading.gif);
--->
$url_0: url(../img/loading.gif) !default;

[kartik-v]

Done. Have renamed the folder sass to scss.

[flo-sch]

Great, thanks :)

By chance, do you have any estimation for the 4.4.5 release?

[kartik-v]

v4.4.5 released

[flo-sch]

Amazing, it works now, thank you for your reactivity!

[Phanlanx]

I am actually having this problem as well. Am using webpack and these dependencies:

├── @babel/core@7.1.0
├── @fortawesome/fontawesome-free@5.3.1
├── autoprefixer@9.1.5
├── b@2.0.1
├── babel-core@6.26.3
├── babel-loader@8.0.2
├── babel-preset-env@1.7.0
├── bootstrap@4.1.3
├── bootstrap-datepicker@1.8.0
├── bootstrap-fileinput@4.5.1
├── bootstrap4c-custom-switch@1.0.11
├── clean-webpack-plugin@0.1.19
├── copy-webpack-plugin@4.5.2
├── css-loader@1.0.0
├── datatables.net-bs4@1.10.19
├── datatables.net-buttons-bs4@1.5.4
├── datatables.net-colreorder-bs4@1.5.1
├── datatables.net-fixedcolumns-bs4@3.2.6
├── datatables.net-fixedheader-bs4@3.1.5
├── datatables.net-keytable-bs4@2.5.0
├── datatables.net-responsive-bs4@2.2.3
├── datatables.net-rowgroup-bs4@1.1.0
├── datatables.net-scroller-bs4@1.5.1
├── ekko-lightbox@5.3.0
├── exports-loader@0.7.0
├── extract-text-webpack-plugin@4.0.0-beta.0
├── file-loader@2.0.0
├── image-webpack-loader@4.3.1
├── imports-loader@0.8.0
├── jquery@3.3.1
├── mini-css-extract-plugin@0.4.3
├── node-sass@4.9.3
├── normalize.css@8.0.0
├── npm@6.4.1
├── popper.js@1.14.4
├── postcss-loader@3.0.0
├── sass-loader@7.1.0
├── select2@4.0.6-rc.1
├── select2-bootstrap-theme@0.1.0-beta.10
├── style-loader@0.23.0
├── toastr@2.1.4
├── uglifyjs-webpack-plugin@2.0.1
├── webpack@4.20.2
├── webpack-cli@3.1.2
└── webpack-dev-server@3.1.9

And this is the error:

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleNotFoundError: Module not found: Error: Can't resolve '../img/loading-sm.gif'

How did you fix your problem on your end @flo-sch ?

[tomas-kulhanek]

I have same problem cc @kartik-v

[aesyondu]

Hi, I have the same problem. Would downloading the missing assets suffice?

https://github.com/kartik-v/bootstrap-fileinput/tree/0179de5cf4aa03676d9f403d63762891c9298eeb/img

[kartik-v]

Yes it should and/or you can change these variables to point to your custom image files path

[aesyondu]

Yes it should and/or you can change these variables to point to your custom image files path

Got it, I downloaded the missing files and webpack resolved them. Thanks!