如何在 SASS/SCSS 中使用 @use 导入和自定义 bootstrap

Question

如何通过 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？

Answer 1

我已阅读以下页面：SASS简介

结论是：

1. 优先使用@use。
2. 代码更加简洁，因为 @use 加载的文件只会加载一次。
3. 然后可以将以下内容customBootstrap.scss导入到您的主index.scss文件中，因为 bootstrap 只能通过 using 转发@forward，并且不能在customBootstrap.scss.

代码如下所示：

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