BigCommerce Stencil 主题编辑器如何捆绑@import SCSS 文件？答案

【问题标题】：How does BigCommerce Stencil Theme Editor bundle @import SCSS files?BigCommerce Stencil 主题编辑器如何捆绑@import SCSS 文件？
【发布时间】：2017-08-02 15:36:17
【问题描述】：

当我使用从节点模块文件夹导入的@import 语句时，导入工作完美。

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

但是，一旦用户通过后台主题编辑器编辑主题并保存更改，就会出现错误，基本上说该 node_modules 文件夹不存在。

预期结果

通过后台编辑器编辑 .scss 文件并“保存并应用”将成功更新主题中使用的相应 .css 文件

实际结果 - https://www.screencast.com/t/RluUCmMq7Iqa

当“@import”语句引用节点模块文件夹中使用的文件时，会出现一串“文件不存在”错误

问题解释视频：1min 40s https://www.screencast.com/t/D4CvGQkk0cl

【问题讨论】：

标签： sass bigcommerce

【解决方案1】：

node_modules 在主题中可用，但在浏览器中编辑时不可用。这样做的原因是在“捆绑”过程中，node_modules 的内容被转换为不同的格式并放在/parsed 目录中。

在商店的控制面板中编辑主题时，/parsed 目录/node_modules 的内容不可编辑，也无法以其他方式访问。

我建议通过非包管理方法包含文件以解决此问题。

【讨论】：

感谢您提供的信息，这是有道理的。我们按照描述进行导入的原因是因为这是在 Cornerstone 主题中使用的现有模式。检查此链接：github.com/bigcommerce/cornerstone/blob/master/assets/scss/… 是否有任何示例方法可以导入供应商样式表，而无需使用 webpack 进行奇怪的复制/粘贴？
@Ransom 我相信这包含在它不会被改变的期望中（至少不是来自 CP，因为在添加导入语句时该功能尚未发布）。我不知道更好的方法:(