nimblehq / react-templates

Our optimized React bolierplate used in our projects
https://nimblehq.co
MIT License
14 stars 2 forks source link

Fix: [Bootstrap Add-on] Compilation errors #130

Closed rosle closed 2 years ago

rosle commented 2 years ago

Issue

After boostrapping the app with Bootstrap add-on, the app fails to compile.

  1. Missing the utilities variables
Failed to compile.

SassError: Undefined variable.
    â•·
142 │       values: $utilities-border-colors
    │               ^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules/bootstrap/scss/_utilities.scss 142:15      @import
  src/assets/stylesheets/vendor/bootstrap/index.scss 5:9  @use
  src/assets/stylesheets/application.scss 5:1             root stylesheet

On Bootstrap 5.2, There is a new bootstrap/scss/maps that we need to import. https://github.com/twbs/bootstrap/blob/46bb9e78d74e0c7f4fa6f6fa611f3d9f8f28860b/site/content/docs/5.2/customize/color.md#generating-utilities

Maybe it's also safer if we lock the version of the Bootstrap installed to avoid this kind of error 💡

  1. A warning of deprecated calculation outside calc()
<w> Deprecation Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.
<w> 
<w> Recommendation: math.div($value, $base-font-size) or calc($value / $base-font-size)
<w> 
<w> More info and automated migrator: https://sass-lang.com/d/slash-div
<w> 
<w> src/assets/stylesheets/functions/_sizing.scss 23:20  rem()
<w> src/dummy.scss 44:21                                 root stylesheet

Expected

The app should be compiled successfully.

Steps to reproduce

  1. Create a new app from the template
  2. Choose Bootstrap as a UI Framework