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.
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:
- Uninstalling the gulp-sass package
- Installing node-sass at 3.4.1 as a first-level dependency of the dev tools
- Reinstalling gulp-sass
In order to do this, you'll need to run some commands in your command line interface.
- Open the command line and go to the directory for your site's source code
- Execute the following commands to remove the 3.5 dependency and install the appropriate version:
npm cache clear
npm uninstall gulp-sass node-sass
npm config set save-exact true
npm install --save firstname.lastname@example.org email@example.com
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
If you still encounter issues, contact our support team.
Posted on Tue, May 17, 2016
by Steve Goldberg filed under