DesignRevision/shards-ui

Error compiling scss

Geczy opened this issue · 19 comments

Geczy commented 
@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 commented

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 commented

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 commented

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

Geczy commented

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

hisk commented

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 commented

I'm having this same problem when loading bootstrap 4.3.1

  • 👍3
taj commented

me too, can we reopen this issue please?

hisk commented

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

taj commented

@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 commented

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 commented

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

  • 👍1
taj commented

@hisk this problem persists with Bootstrap 4.1.3 as well

  • 👍2
ExsyDev commented

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

aalimovs commented

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

  • 👍2
ElmirMahmudov commented

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

  • 👍1
  • ❤️2
cookieshell commented

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!

  • 🎉2
  • 🚀1
iBelit commented

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!

  • 👍1
cookieshell commented

Fixed in #57

MD-AZMAL commented

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",