Error in plugin "sass" when migrating themes "... is deprecated and will be removed in Dart Sass 2.0.0."

Issue

• When migrating themes to a newer version, you can get these types of errors:

  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)
  
  More info and automated migrator: https://sass-lang.com/d/slash-div
  
      ╷
  737 │ $navbar-padding-y:                  $spacer / 2 !default;
      │                                     ^^^^^^^^^^^
      ╵
      build/_css/clay/bootstrap/_variables.scss 737:37  @import
      build/_css/clay/bootstrap/bootstrap.scss 9:9      @import
      build/_css/clay/base.scss 7:9                     @import
      build/_css/clay.scss 1:9                          root stylesheet
  
  [09:24:43] 'build:compile-css' errored after 2.92 s
  [09:24:43] Error in plugin "sass"
  Message:
      build/_css/compat/components/_dropdowns.scss
  Error: compound selectors may no longer be extended.
  Consider `@extend .dropdown-item, .disabled` instead.
  See http://bit.ly/ExtendCompound for details.
  
     ╷
  29 │         @extend .dropdown-item.disabled;
     │                 ^^^^^^^^^^^^^^^^^^^^^^^
  

Environment

• DXP 7.0 or higher

Resolution

• This is because on DXP 7.4 you need to use Node 16.13.0 which as the compatibility matrix in the article Liferay NPM Toolkit compatibility matrix requires Gulp 4;
• For gulp 4 to work, we need to use "liferay-theme-tasks": "^10.x.x" or the latest "11.x.x" (see liferay-themes-toolkit), and this creates breaking changes as it uses DART SASS;
• Because of that, for older themes, we need to disable DART SASS in order to be able to build them (see liferay-theme-tasks#disabling-dart-sass);
• In order to disable DART SASS you need to add this in your package.json:

  {
  	"liferayTheme": {
  		"sassOptions": {
  			"dartSass": false
  		}
  	},
  	"devDependencies": {
  		"node-sass": "7.0.1"
  	}
  }

• As a result, your dependencies in your package.json using the latest themes for DXP 7.4 (see liferay-theme-tasks#get-the-right-dependency-version-for-your-theme) would look similar to this:

  {
  	"liferayTheme": {
  		"baseTheme": "styled",
  		"screenshot": "",
  		"templateLanguage": "ftl",
  		"version": "7.4",
  		"sassOptions": {
  			"dartSass": false
  		}
  	},
  	"devDependencies": {
  		"compass-mixins": "0.12.10",
  		"gulp": "4.0.2",
  		"liferay-font-awesome": "3.5.2",
  		"liferay-frontend-css-common": "6.0.5",
  		"liferay-frontend-theme-styled": "^6.0.51",
  		"liferay-frontend-theme-unstyled": "^6.0.44",
  		"liferay-theme-tasks": "^11.4.0",
  		"node-sass": "7.0.3"
  	}
    }

• In order to see the results, you need to run npm install and gulp deploy (this includes guld build);
• In case you don't see any results or changes after deploying your newly generated theme, clear the browser cache (each browser has its way) and also the portal cache from Control Panel > Server Administration > Execute Clear content cached by this VM and Clear content cached across the cluster (for more details, check: Server Administration Resources)