Error compiling scss

[Geczy]

@import '~bootstrap/scss/bootstrap';
@import '~shards-ui/src/scss/shards';

I receive the following error located here

https://github.com/DesignRevision/shards-ui/blob/master/src/scss/_variables.scss#L744

$popover-arrow-outer-width:           ($popover-arrow-width + 1px) !default;
                                     ^
      Incompatible units: 'px' and 'rem'.

[hisk]

The $popover-arrow-width variable uses px a few lines above in Shards.

Please make sure that you are using the beta-1 version of Bootstrap 4 or that you are not changing the value type somewhere in between.

[Geczy]

But Bootstrap 4 beta 2 uses rem, and you even include beta 2 in your README

https://github.com/DesignRevision/shards-ui#-quick-start

[hisk]

Oh, haven't noticed that, thanks for pointing it out. Please let me know if using beta-1 fixes your issue.

[Geczy]

It does fix it. Rolling back is not a fix though, do you plan to support bootstrap 4b2?

[hisk]

Adding support for beta-2 is on the list, but not a priority yet. If v4-stable doesn't ship by then, expect some movement in that direction starting early next year.

[piuccio]

I'm having this same problem when loading bootstrap 4.3.1

[taj]

me too, can we reopen this issue please?

[hisk]

@piuccio @tajchumber Can you please share the error you are receiving here?

[taj]

@hisk The issue is here

The error I get is:

Module build failed: ModuleBuildError: Module build failed:
$popover-arrow-outer-width:           $popover-arrow-width + 1px !default;
                                     ^
      Incompatible units: 'px' and 'rem'.

[piuccio]

I encountered this problem while trying to use shard-dashboard-lite inside a next.js project using sass.

If I import @import "shard-dashboard-lite/src/shards-dashboard/styles/shards-dashboards.1.1.0.min.css"; everything works fine, but when I use @import "shard-dashboard-lite/src/shards-dashboard/styles/scss/shards-dashboards.scss"; I get the error

$popover-arrow-outer-width:           $popover-arrow-width + 1px !default;
                                     ^
      Incompatible units: 'px' and 'rem'.
      in .../node_modules/shards-ui/src/scss/_variables.scss (line 759, column 39)

I'm using

"bootstrap": "4.3.1",
"node-sass": "4.11.0",
"shards-react": "1.0.3"

[hisk]

@tajchumber @piuccio The issue is cause due to the fact that Shards does not currently support Bootstrap 4.3.x. Please check and make sure that you are using Bootstrap 4.1.x 😄

Support for the latest version is coming soon.

[taj]

@hisk this problem persists with Bootstrap 4.1.3 as well

[ExsyDev]

@hisk I have a same problem. I use bootstrap: 4.3.1. Please fix it

[aalimovs]

Same errors here:

4.3.1 - Error: Incompatible units: 'px' and 'rem'.
4.1.3 - Error: Incompatible units: 'px' and 'rem'.
4.0.0-beta - Error: (en: "Choose file...") isn't a valid CSS value

[ElmirMahmudov]

i just imported bootstrap after 'shards-dashboards' it worked.

[cookieshell]

There are known factors that can cause this issue depending on the environment and dependencies versions. Our team will provide a fix as soon as possible. Thank you for your patience!

[iBelit]

problem is with this line:759
$popover-arrow-outer-width: $popover-arrow-width + 1px !default;

i removed "!default" from $popover-arrow-width variable in line 755 and my problem solved!

[cookieshell]

Fixed in #57

[MD-AZMAL]

Having the same issue

code

@import '~bootstrap/scss/bootstrap';
@import '~shards-ui/src/scss/shards';

Version

    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "shards-react": "^1.0.3",
    "bootstrap": "^4.6.0",
    "node-sass": "^5.0.0",