Error in plugin "gulp-sass" when deploy Liferay 7.4 theme

Question

While migrating my Liferay 7 theme to 7.4 version, I got warnings like

Deprecation Warning: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 2) or calc($spacer / 2)

In-order to fix those warnings, I updated my package.json by adding

"liferayTheme": { "baseTheme": "styled", "templateLanguage": "ftl", "version": "7.4", "sassOptions": { "dartSass": false } }

but after updating this, I did npm install and gulp deploy, it throws the below error

I tried deleting node-modules/package-lock.json file and updated gulpfile.js by adding and installing through npm

const sass = require('gulp-sass')(require('sass'));

I also tried the suggestion here, but nothing works.

I am running

node v16.13.0 (npm v8.1.0) (Can't downgrade as this is recommended for 7.4)

Gulp 4.0.2

gulp-sass 5.1.0

sass 1.58.0

liferay-theme-tasks 11.4.0

I assume node-sass is deprecated and any pointers in fixing this issue would be really appreciated.

Thanks

Answer 1

gulp-sass used to have a default compiler which was node-sass.

but as you mentioned, node sass is now deprecated, insted of node-sass you need to use dart-sass(sass)

and you can use it like this =>

const sass = require("gulp-sass")(require("sass"));

npm packages that you need =>

"gulp-sass": "^5.1.0",
"sass": "^1.54.9"

• another thing, you might want to migrate to the new ES6-module-gulp-file.
• also you might like this gulp-boilerplate