Topic: Can we get path variable in Sass (ASKING AGAIN)

admin5 pro asked 5 years ago


Hi guys, I have asked for this already.... Can you PLEASE add a path variable to all the paths used in mdb. Otherwise I cannot import the scss file, since it uses relative paths. Here are where I asked about it: Can we get path variable in Sass You already do it for the fonts: $roboto-font-path: "../font/roboto/" !default;, but not for ANY of the images. Please see the error below when I state @import '../node_modules/mdbootstrap/sass/mdb.scss':
ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module not found: Error: Can't resolve '../img/overlays/01.png' in '/app/src'

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module not found: Error: Can't resolve '../img/overlays/02.png' in '/app/src'

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module not found: Error: Can't resolve '../img/overlays/03.png' in '/app/src'

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module not found: Error: Can't resolve '../img/overlays/04.png' in '/app/src'

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module not found: Error: Can't resolve '../img/overlays/05.png' in '/app/src'

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module not found: Error: Can't resolve '../img/overlays/06.png' in '/app/src'

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module not found: Error: Can't resolve '../img/overlays/07.png' in '/app/src'

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module not found: Error: Can't resolve '../img/overlays/08.png' in '/app/src'

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module not found: Error: Can't resolve '../img/overlays/09.png' in '/app/src'

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module not found: Error: Can't resolve '../img/svg/arrow_left.svg' in '/app/src'

ERROR in ./~/css-loader?{"sourceMap":false,"importLoaders":1}!./~/postcss-loader?{"ident":"postcss"}!./~/sass-loader/lib/loader.js?{"sourceMap":false,"precision":8,"includePaths":[]}!./src/styles.scss
Module not found: Error: Can't resolve '../img/svg/arrow_right.svg' in '/app/src'

Marta Wierzbicka staff answered 4 years ago


Hi admin5, I understand you. We improve our product and support all the time. We are convinced that if you would like to give MDB another chance, you will not be disappointed. Best regards, Marta

admin5 pro answered 4 years ago


Hi Marta, Thanks for addressing this issue. However we have moved on to other frameworks as we (and a lot of other users) did not receive any support on a simple and basic issue (various pull requests, form posts and comments). I hope at least other users find the fixes useful.

Marta Wierzbicka staff answered 4 years ago


Hi, we've fixed this issue with variables of paths in MDB 4.5.1 version. Best, Marta

Edyta Dabrowska free answered 5 years ago


Sorry, I didn't get that earlier. This will be changed in the next release soon. Regards,

Darío Blanco free commented 4 years ago

Hi, There are like 4 Pull Requests in your open source project that weren't even addressed https://github.com/mdbootstrap/bootstrap-material-design/pull/78 https://github.com/mdbootstrap/bootstrap-material-design/pull/107 https://github.com/mdbootstrap/bootstrap-material-design/pull/136 https://github.com/mdbootstrap/bootstrap-material-design/pull/137 For such a small fix, that in my opinion requires not much development effort (and resolves a bug in the current `mdbootstrap` npm package, which is a plus), 8 months seem like a big time for addressing the change. From the community I think we are more than willing to help and to patch it (me included if I have to create another Pull Request solving the current conflicts). Can we please give a solution to this? It will be much appreciated :) Thanks!

admin5 pro answered 5 years ago


I cannot see my reply.... Here it is again: I cannot change the paths of _hover-effects.scss if I install it via npm. Let me explain in more detail. Steps:
  1. Add "mdbootstrap": "^4.3.2" to my package.json
  2. In my own local style.scss file i have the following lines: `$roboto-font-path: "../node_modules/mdbootstrap/font/roboto/"; @import '../node_modules/bootstrap/scss/bootstrap.scss';`
  3. Run npm install
Now the above steps works for fonts but not for the images. BOTH fonts and images uses paths, the only difference is you created a variable for the font path that I can override, but you did not create a variable for the images path. All im asking is to add a variable for the images as well. If there is ANYTHING I have to change in your scss files it implies that I cannot just use npm install. I will even give you the solution: _variables.scss
/*** Fonts ***/
$roboto-font-path: "../font/roboto/" !default;
should change to
/*** Fonts ***/
$roboto-font-path: "../font/roboto/" !default;

/*** Images ***/
$images-path: "../img/" !default;
AND _hover-effects.scss
.pattern-1 {
    background: url(../img/overlays/01.png);
}
should change to (for all patterns)
.pattern-1 {
    background: url(#{$images-path}overlays/01.png);
}
AND _carousels-basics.scss
.carousel-control-prev-icon {
    background-image: url(../img/svg/arrow_left.svg);
 }
 .carousel-control-next-icon {
    background-image: url(../img/svg/arrow_right.svg);
 }
should change to
.carousel-control-prev-icon {
    background-image: url(#{$images-path}svg/arrow_left.svg);
 }
 .carousel-control-next-icon {
    background-image: url(#{$images-path}svg/arrow_right.svg);
 }
This is a change that is simple to implement, will not break anything, and will allow anyone to be able to import the scss file. But if this is not changed, it means I now have to host my own npm repo where I basically have forked your github and just made this small change. Please guys. I don't understand why you did this for fonts but not for images.

pablodgcatulo pro commented 4 years ago

Thanks! You saved me a lot of time!

admin5 pro answered 5 years ago


I cannot change the paths of _hover-effects.scss if I install it via npm. Let me explain in more detail. Steps:
  1. Add "mdbootstrap": "^4.3.2" to my package.json
  2. In my own local style.scss file i have the following lines: `$roboto-font-path: "../node_modules/mdbootstrap/font/roboto/"; @import '../node_modules/bootstrap/scss/bootstrap.scss';`
  3. Run npm install
Now the above steps works for fonts but not for the images. BOTH fonts and images uses paths, the only difference is you created a variable for the font path that I can override, but you did not create a variable for the images path. All im asking is to add a variable for the images as well. If there is ANYTHING I have to change in your scss files it implies that I cannot just use npm install. I will even give you the solution: _variables.scss
/*** Fonts ***/
$roboto-font-path: "../font/roboto/" !default;
should change to
/*** Fonts ***/
$roboto-font-path: "../font/roboto/" !default;

/*** Images ***/
$images-path: "../img/" !default;
AND _hover-effects.scss
.pattern-1 {
    background: url(../img/overlays/01.png);
}
should change to (for all patterns)
.pattern-1 {
    background: url(#{$images-path}overlays/01.png);
}
AND _carousels-basics.scss
.carousel-control-prev-icon {
    background-image: url(../img/svg/arrow_left.svg);
 }
 .carousel-control-next-icon {
    background-image: url(../img/svg/arrow_right.svg);
 }
should change to
.carousel-control-prev-icon {
    background-image: url(#{$images-path}svg/arrow_left.svg);
 }
 .carousel-control-next-icon {
    background-image: url(#{$images-path}svg/arrow_right.svg);
 }
This is a change that is simple to implement, will not break anything, and will allow anyone to be able to import the scss file. But if this is not changed, it means I now have to host my own npm repo where I basically have forked your github and just made this small change. Please guys. I don't understand why you did this for fonts but not for images.

Edyta Dabrowska free answered 5 years ago


Hello, Your paths should be like: ../img/overlays/01.png -> /node_modules/mdbootstrap/img/overlays/01.png for every path in _hover-effects.scss file. You can put this in variables in your project. Regards,

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: Yes
Tags