部署Liferay 7.4主题时gulp-sass插件报错求助

算力阿峰

2026-8-2

Liferay 7主题迁移至7.4的Sass兼容问题修复方案

问题背景

迁移Liferay 7主题到7.4版本时，触发Sass除法语法弃用警告：

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)

为消除警告，在package.json中添加关闭Dart Sass的配置：

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

但执行npm install和gulp deploy时出现gulp-sass插件报错，已尝试删除node_modules与package-lock.json、修改gulpfile.js手动引入sass依赖、参考官方文档等操作，均未解决问题。

当前环境参数：

node v16.13.0（npm v8.1.0，因Liferay 7.4要求无法降级）
Gulp 4.0.2
gulp-sass 5.1.0
sass 1.58.0
liferay-theme-tasks 11.4.0

修复方案

方案1：替换Sass除法语法（推荐）

放弃关闭Dart Sass的方案，直接适配新语法标准，从根源解决警告：

对于变量除法，将$value / $divisor形式替换为math.div($value, $divisor)，需在样式文件开头添加@use "sass:math";引入模块
对于需要保留CSS原生计算的场景，使用calc($value / $divisor)替代直接除法

方案2：适配Node Sass依赖版本

若坚持关闭Dart Sass，需确保依赖版本兼容旧版Node Sass：

卸载当前冲突的依赖：

npm uninstall sass gulp-sass

安装兼容版本的依赖：

npm install gulp-sass@4.1.0 node-sass@7.0.1 --save-dev

确认package.json中的sassOptions配置完整无语法错误
删除node_modules和package-lock.json，重新执行npm install && gulp deploy

方案3：覆盖liferay-theme-tasks的Sass配置

在gulpfile.js中强制指定使用Node Sass实现，覆盖默认配置：

修改gulpfile.js内容：

const themeTasks = require('liferay-theme-tasks');

themeTasks.registerTasks({
    sassOptions: {
        implementation: require('node-sass'),
        sassOptions: {
            outputStyle: 'compressed'
        }
    }
});