我创建了一个使用 scss 进行样式设置的小型 vue.js 库，并将其发布为 npm 包。它适用于包中包含的默认主题。但是，如果我想从使用该 npm 包的应用程序提供自定义主题，您会怎么做？
该库的一个非常基本版本的源代码在这里：https://github.com/gwildu/gwi-vue-components
这个想法是，您将样式文件夹复制粘贴到某个地方(例如，复制到应用程序目录或另一个 npm 包中)，并将库包配置为从该复制目录导入。
我自己做了一些调查，发现多年来一直有一个关于在 sass 中进行动态导入的大讨论。此问题(自 2013 年以来开放)声称添加了这样的功能(他们称之为load)。不确定 sass 的开发活动程度如何，以及何时支持此功能。目前，我看到了3种可能的解决方案：
- 移至 LESS，因为它支持动态导入。语义 UI 为您提供了有关如何在 LESS 中完成主题的提示
- 可以从 SASS 中的相对路径导入。这样，您还可以从软件包根目录(应用程序目录)的父目录导入，例如
@import '../../theme/index';.您将在包中的某个位置支持一个主题示例，然后使用者必须将其复制到其应用程序的根目录，并根据自己的需要进行调整。在包中，然后从使用者应用程序文件夹中的该目录导入主题。缺点是，该软件包无法开箱即用 - 包中有一个默认主题，并在自述文件中添加了一些说明，用户如何在生成脚本中重写该主题。使用者必须将默认主题复制到他的应用程序目录中，根据自己的需要进行调整，然后在构建脚本中，他将替换主题，例如，
node_modules/your-library-package-folder/theme/应用程序文件夹中的主题。
要完成的是动态导入的方法(SASS 尚不支持)：
- 在库包的主主题文件(将由组件导入)中，您将像方法 2 中一样从 Consumer 应用程序文件夹中相对导入配置文件(见上文)，但该配置文件 yould 不包含主题，而只包含变量中主题的导入路径。 然后，包主主题文件将使用该变量导入主题。为了使库开箱即用，我想如果消费者目录中的配置文件不存在(未测试)，将有一种方法可以将默认主题作为备份
更新： 我尝试了方法 3，但未能获得有用的东西。这种方法的问题在于，当您将库更新到更高版本时，您必须以某种方式将自定义主题与默认主题同步，这可能会变得过于复杂而无法以合理的方式处理。然后我尝试使用 SASS 的覆盖功能，如下所述：编译为 CSS 时如何覆盖 SCSS 变量，这导致我接近
- 在库组件中，首先导入一个包含可能的自定义变量的文件，然后将库中的变量声明为默认值。
这种方法的问题在于 SASS 不支持可选导入。带有自定义变量的文件必须存在于某个地方。因此，如果库更新，您必须再次为库中更改的每个组件/文件同步自定义主题文件。显然，SASS也不想在未来支持这样的功能：https://github.com/sass/sass/issues/779 这很可悲，因为在我看来，这是能够在没有高度复杂的构建步骤的情况下进行主题化的基本功能。
总的来说，似乎 SASS 本身正在尽一切努力防止简单的主题方法，这让我想到再次回到 LESS。在我看来，在 SASS 中没有一种简单的静态主题方法超过了没有在 LESS 中定义自定义函数的简单方法的缺点。