css - 如何在 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";

样式.scss

@import 'custom';

Answer 1

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

_custom.scss

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

样式.scss

@use 'custom'