How does BigCommerce Stencil Theme Editor bundle @import SCSS files?

Question

When I use an @import statement that imports from a node modules folder, the import works perfectly.

@import "../../node_modules/bulma-scss/scss/utilities/functions";

However once a user goes to edit the theme via the backoffice theme editor and saves the changes, there is an error basically saying that that node_modules folder does not exist.

Expected Result

Editing a .scss file via the backoffice editor and 'save and apply' would successfully update the corresponding .css file used in the theme

Actual Result - https://www.screencast.com/t/RluUCmMq7Iqa

A string of 'file doesn't exist' errors occurs as the "@import" statements reference files used in the node modules folder

Video of issue explained: 1min 40s https://www.screencast.com/t/D4CvGQkk0cl

Answer 1

node_modules are available in the theme, but are not available when editing in the browser. The reason for this is that during "bundling", the contents of node_modules is converted into a different format and placed inside the /parsed directory.

When editing a theme in the control panel of a store, the contents of the /parsed directory/node_modules is not available to edit and not otherwise accessible.

I would recommend including the file through a non-package manage method in order to address this.