Sass Compilation Error Solutions for Gulp in SuiteCommerce

Sass compilation errors can arise when using Gulp in SuiteCommerce Advanced, particularly due to changes in dependencies. The gulp-sass package utilizes node-sass, and when updates lead to fatal errors, especially with Bootstrap, adjustments are necessary.

Understanding the Issue

When executing the gulp local command or deploying with gulp deploy, you may encounter an error message that resembles:

formatted Error: You may not @extend an outer selector form within @media you may only @extend selectors within the same directive. … [etc]

This issue stems from incompatibilities in Sass code following the use of node-sass version 3.5.

How to Fix Compilation Errors

To resolve these compilation issues, follow these steps:

1. Open your command line in the project's <Source Code> directory.
2. Execute the following commands to remove the problematic version and install the required version:
   bashCopy

   npm cache clear
   npm uninstall gulp-sass node-sass
   npm config set save-exact true
   npm install --save node-sass@3.4.1 gulp-sass@2.1.0

   Note: This action modifies your package.json file. Make sure to save these changes.
3. Run gulp local to check if the errors have been resolved.

If you previously installed gulp-sass globally, uninstalling these global instances may also be necessary.

Uninstalling Global gulp-sass

Here’s how to remove global installations based on your operating system:

1. Windows Users: Run as either Administrator or User:
   bashCopy

   npm uninstall -g node-sass gulp-sass

2. Linux/Mac Users: Execute the following command:
   bashCopy

   sudo npm uninstall -g node-sass gulp-sass

By following these steps, you can effectively mitigate Sass compilation errors while using Gulp, ensuring smoother local server operations and deployments.