Level 7
That's the thing - the code comes from Bootstrap's scss files and it's impossible to find where the error comes from because those values are compiled from variables, i.e. calc(#{$value1} - #{$value2}), #{$value1} - #{$value2})
Nov 27, 2019
8
Level 7
Error in Bootstrap files when compiling assets.
I was running npm run watch which was working fine until it got stuck on 16% when compiling. I googled it and found that running npm run prod shows the error that doesn't let it compile. When I ran npm run prod I got this:
Lexical error on line 1: Unrecognized text.
Erroneous area:
1: 1.5em + 0.75rem2px
^.....................^
I commented everything out - all my styles, vue components and js, and I still get the error.
The only thing that works - commenting out @import '~bootstrap/scss/bootstrap'; from app.scss.
I also tried updating Bootstrap from v4.0 to v4.4 and deleting node_modules folder with package-lock.json and running npm install- got no errors there. But then running npm run prod gives the same error.
Anyone have any experience with this? I've been stuck on this for hours.
Level 30
Are you overriding some variables in variables.scss ?
Level 7
Only the primary color, commented it out, the error persists.
Level 7
Ok, I found the culprit: it's this line in node_modules/bootstrap/scss/_functions.scss:
@return if($return-calc == true, calc(#{$value1} + #{$value2}), #{$value1} + #{$value2});
the function itself:
@function add($value1, $value2, $return-calc: true) {
@if $value1 == null {
@return $value2;
}
@if $value2 == null {
@return $value1;
}
@if type-of($value1) == number and type-of($value2) == number and comparable($value1, $value2) {
@return $value1 + $value2;
}
@return if($return-calc == true, calc(#{$value1} + #{$value2}), #{$value1} + #{$value2});
}
If I remove the last @return statement and add @return 12 or some other random number npm run prod compiles successfully.
I'm not using calc() in any of my styles but it is used on various Bootstrap elements such as buttons, that's why I'm getting the error.
How can I fix this? Editing Bootstrap files directly is not a good idea obviously.
Level 7
Ok, I just checked Bootstraps GitHub account and I'm not the only one having this issue. If anyone else is experiencing this - here's the discussion: https://github.com/twbs/bootstrap/issues/29743
Level 102
Might be a good idea to report it on the official issue tracker.
Level 30
@memele I could reproduce the issue. Indeed as you said, it is an issue with bootstrap and precisely in the version 4.4.0. I fixed it by installing 4.3.1:
npm install [email protected] --save-dev
Assuming bootstrap is also a dev dependency in your case.
Then: npm run prod would properly work.
Level 1
This issue is resolved in Bootstrap 4.4.1
Please or to participate in this conversation.