1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Can we get path variable in Sass

admin5 pro asked 7 years ago

Long story short I created a private npm repo for the theme, thus the theme will be located in node_modules in my project. For this reason when I import the mdb.scss file I get 2 errors (both related to relative paths not being found since my style.scss is not located in the node_modules folder): 1. Cannot find module "../font/.." 2. Cannot find module "../img/.." I was able to fix the font issue because it uses the variable $roboto-font-path in its path (In _roboto.scss: src: local(Roboto Thin), url('#{$roboto-font-path}Roboto-Thin.eot');), this means I could just predefine it like so: 
$roboto-font-path: "../node_modules/mdbootstrap/font/roboto/";
@import '../node_modules/mdbootstrap/sass/mdb.scss';
However the problem is the img path does not work the same, it does not make use of a variable in the path (In _hover-effects.scss: background: url(../img/overlays/01.png);) , this means it can't be imported to another folder. So can I ask that you also change that in to using a variable, just like you did with fonts. For example you can change it into: background: url(#{$img-path}overlays/01.png); and then add $img-path: "../img/" !default; in _variables.scss, just like you did with fonts here as well: $roboto-font-path: "../font/roboto/" !default;

Doug Kent free answered 7 years ago

I submitted a pull request on this.  The fix is easy; not fixing is painful and not reasonable.

admin5 pro commented 7 years ago

Hi Doug, Don't get your hope up. I have been asking for 10 months. MDB has absolutely no clue as to how big of an issue this is. And yet it is so easy to fix. I bought the PRO version of MDB beginning of the year to accelerate our companies front end development, and to be honest, I don't know if it was worth it See my other posts about it: https://mdbootstrap.com/support/can-we-get-path-variable-in-sass-asking-again/ https://mdbootstrap.com/support/path-variable-for-images-not-fully-functional/

Doug Kent free commented 7 years ago

Ah, indeed you have been persistent, Marta! Thanks for that! Maybe we'll get lucky and they'll take the pull request. It is the same change you described in one of your posts. What I don't understand is how so few people apparently must be trying to use MDB SASS. Maybe people aren't using carousel, the removal of which works around this problem. Maybe people are following MDB's suggestion, which I believe is really unreasonable, to put their custom SASS files _inside_ the package (like the node_modules) folder.

Marta Wierzbicka staff answered 7 years ago

Hello, Thank you for sharing your solution. Best, Marta

John Livingston pro answered 7 years ago

Note: Just purchased Pro and also had to update the img path in _light-box.scss. Overall, it seems like a pretty sweet project. I just don't want to pull in the entire library, so glad SASS is an option.

John Livingston pro answered 7 years ago

I had the same problem and ended up tweaking it a bit as well. For those looking for a solution, do the following: 1. In your main SCSS file use the following code. Your paths will likely be different. Until this is fixed, I copied over the mdb sass files from node_modules to my app directory. // Import core bootstrap @import './bootstrap/sass/_bootstrap.scss'; // MDB Variables $roboto-font-path: './theme/mdbootstrap/font/roboto/'; $img-path: './theme/mdbootstrap/img/'; // Import MDB @import './theme/mdbootstrap/sass/mdb.scss'; 2. Update any references from ../img/ to #{$img-path}. I had to update _carsousel-basics.scss and _hover-effects.scss.

Marta Wierzbicka staff answered 7 years ago

Hello, Thank you for notice and we look at this issue soon. Best, Marta
Write
Create snippet
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
  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
Tags
npm relative-path sass
About author
admin5
Pro User 20Support score
5Questions 9Answers 0Snippets