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

Question

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

_custom.scss

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

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

styles.scss

@import 'custom';

Answer 1

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

_custom.scss

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

styles.scss

@use 'custom'

How to use @use in Bootstrap v5 instead of @import for customization