Source Code Error Resolution for Gulp in SuiteCommerce

When deploying source files in SuiteCommerce Advanced, you might encounter the following error:

SOURCE CODE ERROR. Error: You may not @extend an outer selector from within @media. You may only @extend selectors within the same directive.

This error typically arises due to mismatches in node-sass versions within the package.json files located in the top-level directory and the node_modules/gulp-sass directory. Here’s how to resolve it:

Steps to Correct the Source Code Error

1. Open Command Line: Navigate to the top-level directory of your source code.

2. Execute Commands:

   For Windows Users:

   javascriptCopy

   1npm install -g npm
   2npm cache clear
   3npm uninstall gulp-sass
   4npm uninstall node-sass
   5npm config set save-exact true
   6npm install node-sass@3.4.1 --save
   7npm install --save gulp-sass@2.1.0

   For Linux/Mac Users:

   javascriptCopy

   1sudo npm install -g npm 
   2npm cache clear
   3npm uninstall gulp-sass
   4npm uninstall node-sass
   5npm config set save-exact true
   6npm install node-sass@3.4.1 --save
   7npm install --save gulp-sass@2.1.0

   Note: These commands will modify the package.json file. Ensure you preserve these changes.

3. Run Gulp: After completing the installations, run gulp local to verify that the source code error has been resolved.

Uninstalling Global Installations

If you installed gulp-sass globally, you might need to remove those instances:

1. Open Command Line: Navigate to the top-level directory of your source code.

2. Uninstall Globals:

   For Windows Users: Execute the following command:

   Copy

   undefined

npm uninstall -g node-sass gulp-sass

 
**For Linux/Mac Users**: Execute the following commands:

sudo npm uninstall -g node-sass gulp-sass

 
Following these steps should help you resolve the source code error while running Gulp in SuiteCommerce Advanced.