Login with:


Or:


Not a member? Sign Up

Forgot Password?

Signup with:


Or:


Already have an account? Log in

Can we get path variable in Sass

MDB SupportCan we get path variable in Sass
admin5 Pro User asked 9 months 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;

4 Answers
Marta Szymanska answered 9 months ago

Hello,

Thank you for notice and we look at this issue soon.

Best,
Marta

John Livingston Pro User answered 8 months 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.

John Livingston Pro User answered 8 months 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.

Marta Szymanska answered 8 months ago

Hello,

Thank you for sharing your solution.

Best,
Marta