如何从node_modules文件夹导入sass主题模块

Question

我创建了一个小的vue.js库，它使用scss进行样式化，并将其作为npm包发布。它适用于包中包含的默认主题。但是如果我想从使用npm包的应用程序中提供自定义主题，你会怎么做呢？

该库的最基本版本的来源是：https://github.com/gwildu/gwi-vue-components

这个想法是，您可以将样式文件夹粘贴到某处（例如，粘贴到您的应用程序目录或另一个npm包中），并将库包配置为从该复制目录中导入。

Answer 1

我自己做了一些调查，发现自从多年来在sass中进行动态导入有一个很大的讨论。此issue（自2013年开始）宣称要添加此类功能（他们称之为load）。不确定，sass的开发程度如何，以及何时支持此功能。现在我看到3种可能的解决方案：

1. 移动到LESS，因为它支持动态导入。 Semantic UI为您提供了关于如何在{LE​​SS
中完成theming的提示
2. 可以从SASS中的相对路径导入。这样，您还可以从包根目录（您的应用程序目录）的父目录导入，例如@import '../../theme/index';。您可以在您的包中的某个位置支持消费者然后必须复制到的主题的示例，例如，他的应用程序的根目录并根据他的需要进行调整。然后，在您的包中，您将从该目录中的consumer应用程序文件夹中导入主题。缺点是，包装不能开箱即用
3. 您的包中有一个默认主题，并在自述文件中添加一些说明，用户如何在构建脚本中覆盖该主题。消费者必须将默认主题复制到他的应用程序目录，根据他的需要进行调整，然后在构建脚本中，他将用例如node_modules/your-library-package-folder/theme/替换应用程序文件夹中的主题。

这里要完成的是动态导入的方法（SASS尚不支持）：

1. 在库包中的主要主题文件（将由组件导入）中，您将从消费者应用程序文件夹中进行相对导入类型的配置文件，如方法2（参见上文），但该配置文件yould不包含主题，只包含变量中主题的导入路径。然后，包主主题文件将使用该变量来导入主题。为了使库开箱即用，我想如果consumer目录中的配置文件不存在（未测试），将有一种方法可以将默认主题作为备份。

更新： 我尝试过3但未能获得有用的东西。这种方法的问题在于，当您将库更新为更高版本时，您必须以某种方式将您的客户主题与默认主题同步，而更高版本可能会以合理的方式处理太复杂。然后我尝试使用SASS的覆盖功能，如下所述：How to overwrite SCSS variables when compiling to CSS让我接近

1. 在您的库组件中，您首先导入一个包含可能的自定义变量的文件，并将库中的变量声明为默认值。

该方法的问题是SASS不支持可选导入。具有自定义变量的文件必须存在于某处。因此，如果库再次更新，则必须同步库中已更改的每个组件/文件的自定义主题文件。显然，SASS也不希望在将来支持这样的功能：https://github.com/sass/sass/issues/779这很难过，因为在我看来，如果没有高度复杂的构建步骤就可以进行主题化。

总的来说，似乎SASS本身正在尽一切努力阻止简单的主题方法，这让我想到再次回到LESS。在我看来，没有一种简单的方法可以在SASS中进行静态主题，因为没有一种简单的方法可以在LESS中定义自定义函数。