Can we get path variable in Sass (ASKING AGAIN)

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

admin5 pro asked 7 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'

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

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

Add comment

admin5 pro answered 6 years ago

1 0 Best answer

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.

Add comment

Marta Wierzbicka staff answered 6 years ago

0 0 Best answer

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

Add comment

Edyta Dabrowska free answered 7 years ago

0 0 Best answer

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

Darío Blanco free commented 6 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!

Please insert min. 15 characters.

Add comment

admin5 pro answered 7 years ago

0 0 Best answer

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:
<ol>
	<li>Add <code>"mdbootstrap": "^4.3.2"</code> to my package.json</li>
	<li>
		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';`
	</li>
	<li>Run <code>npm install</code></li>
</ol>

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 <code>npm install</code>.

I will even give you the solution:

_variables.scss
<pre><code>/*** Fonts ***/
$roboto-font-path: "../font/roboto/" !default;</code></pre>

should change to
<pre><code>/*** Fonts ***/
$roboto-font-path: "../font/roboto/" !default;

/*** Images ***/
$images-path: "../img/" !default;</code></pre>

AND

_hover-effects.scss
<pre><code>.pattern-1 {
 background: url(../img/overlays/01.png);
}</code></pre>

should change to (for all patterns)
<pre><code>.pattern-1 {
 background: url(#{$images-path}overlays/01.png);
}</code></pre>

AND

_carousels-basics.scss
<pre><code>.carousel-control-prev-icon {
 background-image: url(../img/svg/arrow_left.svg);
 }
 .carousel-control-next-icon {
 background-image: url(../img/svg/arrow_right.svg);
 }</code></pre>

should change to
<pre><code>.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);
 }</code></pre>

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.

Please insert min. 20 characters.

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:

Add "mdbootstrap": "^4.3.2" to my package.json
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';`
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);
 }

pablodgcatulo pro commented 6 years ago

Thanks! You saved me a lot of time!

Add comment

admin5 pro answered 7 years ago

0 0 Best answer

I cannot change the paths of _hover-effects.scss if I install it via npm.

Let me explain in more detail.

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 <code>npm install</code>.

I will even give you the solution:

_variables.scss
<pre><code>/*** Fonts ***/
$roboto-font-path: "../font/roboto/" !default;</code></pre>

should change to
<pre><code>/*** Fonts ***/
$roboto-font-path: "../font/roboto/" !default;

/*** Images ***/
$images-path: "../img/" !default;</code></pre>

AND

_hover-effects.scss
<pre><code>.pattern-1 {
 background: url(../img/overlays/01.png);
}</code></pre>

should change to (for all patterns)
<pre><code>.pattern-1 {
 background: url(#{$images-path}overlays/01.png);
}</code></pre>

AND

Please guys. I don't understand why you did this for fonts but not for images.

Please insert min. 20 characters.

I cannot change the paths of _hover-effects.scss if I install it via npm. Let me explain in more detail. Steps:

Add "mdbootstrap": "^4.3.2" to my package.json
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';`
Run npm install

/*** 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);
 }

Add comment

Edyta Dabrowska free answered 7 years ago

0 0 Best answer

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,

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

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

admin5

Pro User 20Support score
5Questions 9Answers 0Snippets