Unable to build theme: "Error: Expected number, variable, function, or calculation. log('Invalid unit `#{$unit}`.');"

Issue

• When building a theme there are 'Expected number, variable, function, or calculation $_: log('Invalid unit `#{$unit}`.');' errors:

  Message:
  build/_css/clay/functions/_type-conversion-functions.scss
  Error: Expected number, variable, function, or calculation.
  ╷
  40 │ $_: log('Invalid unit `#{$unit}`.');
  │ ^
  ╵
  build/_css/clay/functions/_type-conversion-functions.scss 40:11 @import
  build/_css/clay/functions/_global-functions.scss 9:9 @import
  build/_css/clay/base.scss 5:9 @import
  build/_css/clay.scss 1:9 root stylesheet
  Details:
  formatted: Error: Expected number, variable, function, or calculation.

Environment

• Liferay DXP 7.3+, when building themes with blade templates.

Resolution

• This error is due to using sass version 1.65.1.
• It is fixed in "liferay-theme-tasks" v11.5.3.
• You just need to rebuild dependencies in the theme to fix the issue:

  # NPM
  npm install && npm run build
  
  # Or alternatively
  yarn && yarn build

• If you still have problems, you can manually change theme's package.json. Update "liferay-theme-tasks" to at least version 11.5.3:

  ...
  "devDependencies": {
     "compass-mixins": "0.12.10",
     "gulp": "4.0.2",
     "liferay-frontend-css-common": "6.0.8",
     "liferay-frontend-theme-styled": "6.0.54",
     "liferay-frontend-theme-unstyled": "6.0.45",
     "liferay-theme-tasks": "^11.5.3",
     "liferay-font-awesome": "3.5.2"
  },
  ...

 Additional Information

• [LPS-194310] fix(liferay-theme-tasks): Fix sass version to 1.64.1
• fix(@clayui/css): log() errors on dart-sass 1.65.1, use error instead