Issue with node-sass while compiling asset - npm - symfony

Question

I am getting this error on npm run prod
npm run prod
> # prod /opt/atlassian/pipelines/agent/build
> encore production
Running webpack ...
ERROR Failed to compile with 2 errors4:15:08 PM
error in ./web/assets/src/scss/styles.scss
Module build failed:
$navbar-padding-horizontal: floor(math.div($grid-gutter-width, 2)) !default;
^
Invalid CSS after "... floor(math": expected expression (e.g. 1px, bold), was ".div($grid-gutter-w"
in /opt/atlassian/pipelines/agent/build/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss (line 369, column 46)
# ./web/assets/src/scss/styles.scss 4:14-219
error in ./web/assets/src/scss/styles.scss
I've gone through quite a lot of fixes and one of them was to use sass instead of node-sass which I did but then it throws this errors
Error: Install node-sass to use enableSassLoader()
yarn add node-sass --dev
And if I disable .enableSassLoader() this this error occurs
FIX To load SASS files:
1. Add Encore.enableSassLoader() to your webpack.config.js file.
2. Install node-sass
yarn add node-sass --dev
This is my webpack.config.js
var Encore = require('#symfony/webpack-encore');
Encore
.setOutputPath('web/assets/public')
.setPublicPath('/assets/public')
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.addEntry('js/scripts','./web/assets/src/js/scripts.js')
.addEntry('js/video','./web/assets/src/js/video/video.js')
.addEntry('js/registration','./web/assets/src/js/registration/registration-lookup.js')
.addStyleEntry('styles', './web/assets/src/scss/styles.scss')
.enableSassLoader(function(sassOptions) {
}, {
resolveUrlLoader: false
})
.enablePostCssLoader()
.autoProvidejQuery()
.enableSourceMaps(!Encore.isProduction())
;
This is my devDependencies in package.json
"devDependencies": {
"#symfony/webpack-encore": "^0.17.1",
"autoprefixer": "^7.2.5",
"bootstrap-sass": "^3.3.7",
"cssnext": "^1.8.4",
"jquery": "^3.6.0",
"linting": "^1.0.0",
"node-sass": "^4.7.2",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.10",
"sass-loader": "^6.0.6",
"webpack-notifier": "^1.5.1"
},
This is my styles.scss
#import "imports/_variables.scss";
$icon-font-path: "~bootstrap-sass/assets/fonts/bootstrap/";
#import "~bootstrap-sass/assets/stylesheets/bootstrap";

Answer 1

Looks like you are always using the latest bootstrap-sass but webpack encore doesn't support math.div.
If you remove the ^ in "^3.3.7" it will set the version to 3.3.7 which doesn't use the math.div function and instead uses "/" for division which should still work.
You should look at upgrading webpack encore but this may not be (easily) possible depending on the project.