Issue with node-sass while compiling asset - npm

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.