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

Posted 2023-02-22

【中文标题】如何从 node_modules 文件夹导入 sass 主题模块

【英文标题】：How to import a sass theming module from node_modules folder

【发布时间】：2018-08-22 14:35:27

【问题描述】：

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

该库的一个非常基本版本的源代码在这里：https://github.com/gwildu/gwi-vue-components

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

【参考方案1】：

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

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

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

在库包中的主主题文件（将由组件导入）中，您将像方法 2（见上文）一样从消费者应用程序文件夹中执行某种配置文件的相对导入（但该配置文件）您将不包含主题，而仅包含主题在变量中的导入路径。然后，该变量将被包主主题文件用于导入主题。为了使库开箱即用，我想如果消费者目录中的配置文件不存在（未测试），我想有一种方法可以将默认主题作为备份。

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

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

这种方法的问题是 SASS 不支持可选导入。带有自定义变量的文件必须存在于某处。因此，如果库更新，您必须再次为库中更改的每个组件/文件同步自定义主题文件。显然 SASS 也不想在未来支持这样的功能：https://github.com/sass/sass/issues/779，这很可悲，因为在我看来，它是无需高度复杂的构建步骤即可进行主题化的基本功能。

总体而言，SASS 本身似乎正在尽一切努力阻止简单的主题化方法，这让我想到再次回到 LESS。在我看来，在 SASS 中没有一种简单的静态主题化方法比在 LESS 中没有一种简单的方法来定义自定义函数的缺点要重要。

【讨论】：

似乎有一种方法可以使用 SASS 进行主题化，vuematerial.io/themes/concepts，从实现方面看起来有点复杂（github.com/vuematerial/vue-material），但我喜欢使用图书馆。可能需要一些时间来挖掘它，如果有人对此尝试有经验，将不胜感激评论或回答......