如何使用全局 scss 变量覆盖我的节点模块

【问题标题】：How can i use global scss variables overwrite my node modules如何使用全局 scss 变量覆盖我的节点模块
【发布时间】：2020-02-25 21:53:21
【问题描述】：

我创建了一个个人 UI 框架（react-components），并希望与我的一些项目共享该框架。

为了更好的管理，我想把我的框架上传到 NPM 上。

我将 SCSS 用于我的框架，该框架由一个全局 SCSS 变量文件组成。如果我想为每个项目使用不同的全局变量值，我将如何处理？我想将我的全局变量文件设置在 node-modules 文件夹之外。

这会影响从节点模块文件夹外进入节点模块的全局变量吗？

任何解决方案将不胜感激。

【问题讨论】：

此参考资料有帮助吗？ stackoverflow.com/questions/14975341/… ...您可以有一个可选的 sass 变量文件导入，位于项目文件夹之外和节点模块之外。如果您的项目中存在带有变量的文件，则样式将更改，否则将生成默认样式。

【解决方案1】：

SCSS 允许您为变量定义默认值，这些值可以被否决。

项目中的示例文件app.scss

$some_color: blue;
@import 'node_modules/yourframework/main'; // This is your frameworks main file

框架中的示例文件node_modules/yourframework/main.scss

$some_color: red !default;
body{
   background-color: $some_color;
}

这将导致您身体的背景为蓝色。

祝你好运！

【讨论】：

我能再问你一个问题吗？它是如何工作的？因为 node_modules/my-framework/main 是构建文件，所以没有 scss。它是CSS。他们怎么知道有 scss 变量？