如何在 Bootstrap v5 中使用 @use 而不是 @import 进行自定义答案

【问题标题】：How to use @use in Bootstrap v5 instead of @import for customization如何在 Bootstrap v5 中使用 @use 而不是 @import 进行自定义
【发布时间】：2021-09-16 15:39:59
【问题描述】：

我正在尝试使用 @use 而不是 @import 将我的 _custom.scss 部分中的所有变量导入到 styles.scss sass 文件中。但是@use 并没有按照我的意图覆盖变量。如何解决？

_custom.scss

 
$primary: #ff00f2;
$secondary: #bb6ef5;

@import "../node_modules/bootstrap/scss/bootstrap";

styles.scss

@import 'custom';

【问题讨论】：

标签： css sass bootstrap-5 dart-sass

【解决方案1】：

使用@use在with中添加所有变量，如下所示

_custom.scss

@use "../node_modules/bootstrap/scss/bootstrap.scss" with (
$primary: 'your color';
$secondary: 'your color';
);

styles.scss

@use 'custom'

【讨论】：