当我们使用@use时如何让用户覆盖SCSS变量

How to let user override SCSS variables when we use @use

我在我的 vue 项目中使用 @use 而不是 @import（但是，如果我们不使用 vue 而使用 react 或者可能是普通的 HTML，问题可能仍然存在） .我为组件创建了 _variables.scss 文件，并让用户通过用户的单独文件覆盖这些变量。使用以下代码段：

@use "../app/variables";

$width: 400px;

并且我在我的项目入口点包含了这个用户的变量覆盖文件。

但是，我无法覆盖用户文件中的 SCSS 变量。我不知道如何才能为用户提供覆盖变量的能力。

示例 CodeSanbox 项目：https://codesandbox.io/s/naughty-sunset-wj8rl?file=/src/styles/user-styles.scss

谢谢。

给你...

  1. 您必须在 styles.scss 文件中包含 @use "../styles/user-styles.scss";。
  2. 将命名空间从 variables 更改为 user-styles。

参见edited CodeSandbox。