Bootstrap在其文档中说，定制是与dart-sass工作，但它只是不正确的。
不支持dart-sass最新版本的@use和@forward模块系统。
使用@import添加自定义颜色的“以前”方法是：
@import "./node_modules/bootstrap/scss/functions";
@import "./node_modules/bootstrap/scss/variables";
@import "./node_modules/bootstrap/scss/utilities";
$custom-theme-colors: (
"testbeige": beige,
"testgreen": lightgreen,
);
// merge the custom colors to the theme-colors
$theme-colors: map-merge($custom-theme-colors, $theme-colors);
// global bootstrap styles
@import "./node_modules/bootstrap/scss/bootstrap.scss";正如您所看到的，我使用了@import，它运行得很好。
但是在SASS的文档中，他们建议不要再使用@import了，它很快就会从SASS中删除。
那么，好吧，让我们试试@使用！
@use "./node_modules/bootstrap/scss/functions";
@use "./node_modules/bootstrap/scss/variables";
@use "./node_modules/bootstrap/scss/utilities";
// no need to go further, it's already not working
// you can also try with @forward, it's the same终端显示一个关于下面一行的错误，并且“$theme-colors”带有下划线：
在终端中-〉$theme-colors-rgb：“$value”）！默认值;
事实上，它是带下划线的，因为scss文件没有使用模块标记语法，因此我们不能在Bootstrap v5中使用@use和@forward。
Dart-sass已经存在很多年了，而且@import已经被弃用了，那么他们为什么还要保留这个语法呢？我已经浪费了几个小时来实现这个语法。
而且，万一我错了，我在哪里没有实现带有@use和@forward的Bootstrap定制呢？
谢谢你，谢谢
2条答案
按热度按时间jqjz2hbq1#
这也是我在v4中面临的一个问题。我在不久前发现了这篇文章，并认为我应该把它传沿着。上一篇文章引用了Bootstrap自己的话，声明SASS模块系统可能要到v6才能看到光。希望这对你有帮助，就像对我一样！：）
Importing Bootstrap into my SCSS via @use instead of @import causes problems
3zwtqj6y2#
我一直在使用bulma和 Bootstrap ，它“应该”不分配大量的工作开始使用
@use和@forward等...据我所知，@use需要额外的语法，如（参见下面的代码块）
as *中的*也可以是一个名称，如variable然后，在为您的
@use添加一个名称后，您的变量需要被称为类似var.$custom-theme-colors的名称，如果您不希望这样，只需使用as *，这样您就可以保持变量不变。只要你
@use所有的nescersarry文件，它应该工作。这是scss虽然，我写了我的大部分标记在SASS。但我认为这是要走的路。我会稍后测试它，并更新我的答案，如果这不工作。