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

Question

如何通过 SASS 变量导入和自定义 Bootstrap ？

我们都使用@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

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

结论是:

1. 最好使用@use。
2. 代码更简洁，因为@use 加载的文件只会加载一次。
3. 下面的 customBootstrap.scss 然后可以导入到您的主 index.scss 文件中，因为 Bootstrap 将仅通过使用 @forward 并且不能在 customBootstrap.scss 中本地使用。

代码如下所示:

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