将SCSS变量烘焙到可重用的单个组件文件中Vue

Question

我想创建一个npm存储库，其中包含一个包含Vue单个文件组件的文件夹，我可以从中轻松导入该文件：

import { Button } from "@user/design-system"

我遇到的问题是Button.vue包含变量，这些变量来自Webpack处理的全局.scss文件。

为npm版本构建时，如何将变量烘焙到每个组件中？ 因此，从本质上讲，我想要一个由npm run serve运行的开发环境，并且我想要一个npm run build，它可以复制所有组件并将CSS variables烘焙到其中以具有独立组件。

Answer 1

您应该在要导入组件的项目中的专用文件（例如_variables.scss）中拥有此变量。然后，您应该使所有组件都可以访问此变量。我建议您使用style-resouces-loader，它将在每个组件中导入变量。 Vue ClI包装器-vue-cli-plugin-style-resources-loader。

要使用已经内联的CSS导出UI库，您应该通过vue-cli-service build构建UI库。然后，您可以导入从CSS构建的SCSS样式的构建组件。