Navigating the Node-SASS Update for BigCommerce

Recently, BigCommerce announced important changes regarding the Node-SASS compiler, which is pivotal for those using SCSS in their store themes. Review and publish your updated theme before January 31, 2024, to avoid any disruptions. After January 31, all SCSS files must be compiled with Stencil’s updated SCSS compiler engine. This upgrade is essential for maintaining the security and efficiency of your online store. Here’s what you need to know and how to prepare for these changes.

Understanding the Update

This announcement was made by BigCommerce because their modified version of Node-SASS, a SCSS to CSS compiler, has been unmaintained for over 2 years, meaning it is outdated and likely has security flaws that could be exploited. In light of that, BigCommerce has opted to use the actively maintained Node-SASS compiler created by Sass themselves, ensuring your BigCommerce store is always up-to-date and safe. 

So, what does this mean for you if you do not upgrade before the deadline? It means that your store’s UI can potentially break whenever you try to make theme edits from the BigCommerce theme editor or, at worst, prevent you from being able to make any changes to the theme due to bundling errors. It’s important to not ignore this issue and stay ahead of the update to avoid any adverse issues that could arise. The upgrade can be applied in two ways:

Automated Upgrade

For many storefronts, BigCommerce has prepared an automated draft version of your theme to address any SCSS compatibility issues. You can find this in your store control panel under the channel manager, labeled as “Theme Name [SCSS AUTOFIXED].” 

Manual Upgrade

If you prefer a more hands-on approach or if your theme requires specific attention, you’ll need to use the latest version of the Stencil CLI, which only supports Node 18. Additionally, a new command, “autofix-scss”, is available to resolve many SCSS issues. Follow these steps for a manual upgrade:

1. Validate your theme’s code by running the “stencil bundle” command via the latest version of stencil-cli.
2. To address most issues, you’ll need to run a script in order to update your files with the correct formatting. There are two different options for this:
   1. Use the “dry run” option to preview potential changes.
      1. stencil -scss-autofix.js –dry
   2. To apply the changes and revalidate, run these commands:
      1. stencil -scss-autofix.js
      2. stencil bundle

3. Once these changes have been saved, test your site to ensure no visual regressions have occurred.
   1. stencil start
4. If there were no errors on your storefront, you can push the changes live by either following the normal theme deployment workflow or running:
   1. stencil push

Final Thoughts

This update is a significant step towards enhancing the security and performance of your BigCommerce store. By taking the necessary actions now, you can ensure a smooth transition and continue providing an excellent online shopping experience for your customers.

If you have any questions or would like a team of experts to help grow your BigCommerce shop, reach out to a Digital Strategist at Coalition Technologies. Our digital marketing experts know what to do to help you achieve your goals. Stay ahead of the ecommerce game and partner with Coalition today!