See our FAQ Section to learn more about how we work.

How to Upgrade Node-Sass for Stencil Themes on BigCommerce

BigCommerce, the leading e-commerce platform, recently announced essential updates about the Node-SASS compiler. This compiler is crucial for those who use SCSS in their store themes.

Please review and publish your updated theme before January 31, 2024, to prevent interruptions. Starting from that date, all SCSS files must be compiled using Stencils enhanced SCSS compiler engine.

This upgrade is necessary for maintaining the security and efficiency of your online store. The following blog post will show you How to upgrade node SASS Update For your BigCommerce Store, what you need to know, and how to prepare for these changes.

Understanding the Update: Why the Switch?

While functional, BigCommerce’s previous custom Node-SASS compiler suffered a key drawback: lack of active maintenance. This meant it wasn’t receiving regular updates, leaving it vulnerable to potential security flaws and incompatible with future SCSS features.

To address these concerns and guarantee the safety and efficiency of your BigCommerce store, the platform is switching to the official Node-Sass compiler, actively maintained by the SASS developers themselves. This ensures access to the latest security patches, bug fixes, and compatibility with upcoming SCSS advancements.

Step-by-Step Guide to Updating Node SASS in a BigCommerce Store

Updating Node-SASS can be accomplished through two methods, which will be discussed straightforwardly below.

1. Automated Way:

Below are simplified steps for resolving the Node SASS issue using an automated approach.

a) Identify the Incompatibility:

b) Receive an Automated Draft Theme:

  • For storefronts with SCSS (Sassy Cascading Style Sheets) compatibility issues, BigCommerce provides an automated draft version of your storefront theme.
  • This draft theme will address the SCSS issues.

c) Check the Draft Theme:

  • The draft theme will be named “Theme Name [SCSS AUTOFIXED].”
  • It’s available for your consideration in the channel manager.

d) Review and Publish:

  • Take your time to review the draft theme thoroughly.
  • Ensure that the SCSS issues have been effectively resolved.
  • If you are satisfied, you can publish the updated theme.

e) Deadline for Action:

  • The deadline for publishing the fixed theme is January 31, 2024.
  • Make sure to complete the process before this date.

2. Manual Way:

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

a) Validate your theme’s code by running the “stencil bundle” command via the latest version of stencil-cli.

stencil bundle

b) To address most issues, you must run a script 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.
  2. To apply the changes and revalidate, run these commands:
stencil scss-autofix
stencil bundle

c) Test for Visual Regressions: Once you’ve saved the changes, testing your site is crucial to ensure no visual regressions have occurred.

stencil start

d) Push Changes Live: You can push the changes live if everything runs smoothly on your storefront. You can follow the normal theme deployment workflow or use the following command:

stencil push

Following these steps, you can manually upgrade your theme, ensuring it meets the required standards and performs without issues.

Final Words:

It’s imperative to upgrade your Node-SASS for your BigCommerce store to ensure security and performance. Whether you choose the automated or manual method, the deadline is January 31, 2024.

For expert assistance with your BigCommerce store, contact Cronix Web, a trusted BigCommerce development company. Don’t delay; safeguard your online store today!