Issue with node-sass while compiling asset – npm


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');
    .addStyleEntry('styles', './web/assets/src/scss/styles.scss')
    .enableSassLoader(function(sassOptions) {
    }, {
         resolveUrlLoader: false

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


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.

Answered By – Adam Mudd

Answer Checked By – Mary Flores (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.