如何在 SASS/SCSS 中使用 @use 导入和自定义引导程序答案

【问题标题】：How to import and customize bootstrap with @use in SASS/SCSS如何在 SASS/SCSS 中使用 @use 导入和自定义引导程序
【发布时间】：2021-06-04 12:42:42
【问题描述】：

如何通过 SASS 变量导入和自定义引导程序？

我们都使用@import，它运行良好但已被弃用，如下所示：

// customVariables.scss
$theme-colors: (
    "primary": #1818a1,
    "secondary": #b8e792,
    "success": #000,
    "danger": #ff4136,
    "warning": #fbbb01,
    "info": #a76a6a,
    "dark": #0e0e68,
    "light": rgb(228, 70, 210),
    "nav-active-bg": #3687bd,
    "light-body": #e092cd,
    "light-card": #77d1d1
);

// customBootstrap.scss
@import url('./customVariables');
@import url('~bootstrap/scss/bootstrap');

首先导入 customVariables 很重要，因此在导入 bootstrap 之前，覆盖变量已经存在。

我的问题是：我如何使用@use 实现相同的目标？

【问题讨论】：

标签： bootstrap-4 sass

【解决方案1】：

我已阅读以下页面：Introduction to SASS

结论是：

首选使用@use。
代码更简洁，因为@use 加载的文件只会加载一次。
然后可以将下面的customBootstrap.scss 导入到您的主index.scss 文件中，因为引导程序将仅使用@forward 转发，并且不能在customBootstrap.scss 中本地使用。

代码如下所示：

// customBootstrap.scss
@use './customVariables';
@forward '~bootstrap/scss/bootstrap' with(
    $theme-colors: customVariables.$theme-colors
);

【讨论】：

当使用'forward with'时，每个变量都必须在customVariables中定义，然后放在那个块中对吗？所以如果你想覆盖 100 个变量，我们需要在 customVariables 中定义它们，然后在 forward 块中？
你可能想看看@each：sass-lang.com/documentation/at-rules/control/each

【解决方案2】：

有一个 github 项目可能会提示如何将引导程序转换为使用模块系统 https://github.com/deepak0174/bootstrap-sass-use-migration/

【讨论】：

看起来很有趣，谢谢分享！然而，对我来说，由于维护不善，我避免依赖此类项目......