Theme upgrade issues

Issue

• We are moving from Liferay 7.3 to Quarterly releases and we would like to upgrade our theme, but facing errors e.g. "No mixin named media-query." or "Undefined variable: '$nav-underline-font-size'."

Environment

• Liferay Quarterly Releases
• Liferay Theme Generator

Resolution

• Make sure you use Node 16.13+, npm 8.1+, theme generator 10.2+, gulp 4+
  Node version information

• Use gulp upgrade command in the theme's folder to upgrade the theme to Liferay 7.4
• Steps:
  
  • delete the build, the dist and the node_modules folder
  • In the src/css/_imports.scss file add @import "clay/cadmin-variables";
  • From the theme's main folder run npm install command
  • Run gulp upgrade and follow the instructions (Add the bootstrap compatibility layer)
  • Then gulp build

Additional Information

• Upgrading theme