Contact Us

SuiteCommerce’s recent update to the Dart Symfony-style SASS compiler has brought improved performance and modern syntax compliance, but also a common Dart SASS compilation error that can break your theme builds. The Dart SASS errors come from SuiteCommerce updating the Dart compiler and syntax discrepancies between the new and old syntax. If you're encountering cryptic SASS errors during local development or deployment, you're in good company. Let’s walk through why these happen and exactly how to fix them.

Related Article: How to Manually Deploy a SuiteCommere Theme

Problem: SuiteCommerce Theme Not Activating

When this Dart SASS issue occurs, the extension manager errors out, and you cannot activate the SuiteCommerce theme. You will know an activation error is a Dart SASS issue when the theme errors in activation.

Error view log message.
Dart SAAS error syntax with a red message of instructions.

Solution: Resolving the Dart SASS Error

Step 1: Run “gulp check-dart-sass” in the theme folder

Step 2: The console will display a handful of syntaxes you need to update and a recommendation on how to fix it in this manner.

Fixing syntax error page.

How to update most syntax fixes:

incorrect extend

@extend .button-secondary:hover; //UPDATE: @extend .button-secondary, :hover;

division used instead of multiplication

margin-right: floor(($gutter / -2)); //UPDATE: margin-right: floor(($gutter * -0.5)); font-size: (4em * 0.333333); // UPDATE: font-size: (4em /3); $fa-fw-width: (20em /16); //UPDATE: $fa-fw-width: (20em * 0.0625);

grid-framework

@mixin calc-grid-column($index, $class, $type) { @if ($type == width) and ($index > 0) { .col-#{$class}-#{$index} { width: percentage(($index / $grid-columns)); } //UPDATE @mixin calc-grid-column($index, $class, $type) { @if ($type == width) and ($index > 0) { .col-#{$class}-#{$index} { width: calc((#{$index} / #{$grid-columns}) * 100%); }

When running the command, it will also give an error for the extras folder, but you should only update the SASS files in the theme folder and then fetch extensions to update the extras folder.

Related Article: SuiteCommerce Advanced (SCA) Extension Deployments Not Being Properly Reflected

Get stuck in a step during this article?

We like to update our blogs and articles to make sure they help resolve any troubleshooting difficulties you are having. Sometimes, there is a related feature to enable or a field to fill out that we miss during the instructions. If this article didn't resolve the issue, please use the chat and let us know so we can update it!

Tagged with Troubleshooting