Can we get path variable in Sass

Topic: Can we get path variable in Sass

admin5 pro asked 8 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;

Add comment

Marta Szymanska staff pro premium answered 8 years ago

0 0 Best answer

Hello, Thank you for notice and we look at this issue soon. Best, Marta

Add comment

John Livingston pro answered 8 years ago

0 0 Best answer

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.

Add comment

John Livingston pro answered 8 years ago

0 0 Best answer

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.

Add comment

Marta Szymanska staff pro premium answered 8 years ago

0 0 Best answer

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

Add comment

Doug Kent answered 7 years ago

0 0 Best answer

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 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.

Add comment

Write

Create snippet

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: No
Provided link: No

admin5

Pro User

20Support score
5Questions 9Answers

0Snippets likes 0Snippets