CSS Compilation Issue

Using a default Laravel installation and importing the SCSS stylesheet, Sweet Alert is unable to compile due to the following error.

import Swal from ‘sweetalert2/dist/sweetalert2.js’ import ‘sweetalert2/src/sweetalert2.scss’

warn - You have enabled the JIT engine which is currently in preview.
ERROR in ./node_modules/sweetalert2/src/sweetalert2.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[7].oneOf[1].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[7].oneOf[1].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[7].oneOf[1].use[3]!./node_modules/sweetalert2/src/sweetalert2.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined function.
    ╷
517 │ $icon-zoom: math.div(strip-units($swal2-icon-size), 5);
    │             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules\sweetalert2\src\scss\_core.scss 517:13  @import
  node_modules\sweetalert2\src\scss\_theming.scss 8:9  @import
  node_modules\sweetalert2\src\sweetalert2.scss 4:9    root stylesheet

[zenflow]

Ok, looks like this is happening because the math.div function used is available with the Dart Sass compiler but not with the LibSass compiler… See https://sass-lang.com/documentation/modules/math#div

Sweetalert2’s own build system uses the Dart Sass package.

We know (based on the error above) that Laravel is using sass-loader. The docs for that package say it can use either Node Sass (which uses LibSass) or Dart Sass, and I’m guessing your default Laravel installation is set up with Node Sass.

@tomshaw You could see about changing the Laravel installation to use the Dart Sass package instead of Node Sass.

[limonte]

Can we just include the compiled CSS in the dist from npm?

It’s included.