Workaround for Sass Compilation Error

We're aware that a number of you have been experiencing issues with the Sass compiler recently. Specifically, when deploying or starting a local server you may have received the following error message:

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

We have a workaround solution for this but first I want to talk about what happened.

Why Now?

SuiteCommerce Advanced uses gulp-sass for compiling SCSS files. After we released Mont Blanc, there was an update to node-sass (to 3.5), which is a dependency of gulp-sass. Unfortunately, this update has caused some Sass that previously compiled fine to throw fatal errors, particularly in Bootstrap.

Correct the Errors

As mentioned, the following is a workaround. We are working on a long-term solution but in the meantime you will need to make modifications to the developer tools to use them without errors.

The third-party package we use has its own libraries inside node_modules > gulp-sass > node_modules. The workaround consists of:

  1. Uninstalling the gulp-sass package
  2. Installing node-sass at 3.4.1 as a first-level dependency of the dev tools
  3. Reinstalling gulp-sass

In order to do this, you'll need to run some commands in your command line interface.

  1. Open the command line and go to the directory for your site's source code
  2. Execute the following commands to remove the 3.5 dependency and install the appropriate version:
  3. 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

  4. Run gulp local to recompile and check to see if it's been fixed.

If you installed gulp-sass globally, you'll need to modify the uninstall command to use the -g flag. Thus:

npm uninstall -g node-sass gulp-sass

Note, Linux and Mac-users, you may need to run the commands with sudo.

If you still encounter issues, contact our support team.

Further Reading