我已经像这样导入了 boostra5 scss https://www.npmjs.com/package/bootstrap:
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import '../../node_modules/bootstrap/scss/functions' ;
// 2. Include any default variable overrides here
// 3. Include remainder of required Bootstrap stylesheets
@import '../../node_modules/bootstrap/scss/variables' ;
@import '../../node_modules/bootstrap/scss/mixins';
// 4. Include any optional Bootstrap components as you like
@import '../../node_modules/bootstrap/scss/containers' ;
@import '../../node_modules/bootstrap/scss/grid' ;
// 5. Optional for bootstrap
@import '../../node_modules/bootstrap/scss/accordion' ;
@import '../../node_modules/bootstrap/scss/modal' ;
一切都很好,它编译。我正在使用 dart sass 版本并想使用 @use 而不是 @import。
因此,根据文档,我使用 @use 关键字并在最后使用“as *”省略命名空间。
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@use '../../node_modules/bootstrap/scss/functions' as *;
// 2. Include any default variable overrides here
// 3. Include remainder of required Bootstrap stylesheets
@use '../../node_modules/bootstrap/scss/variables' as *;
@use '../../node_modules/bootstrap/scss/mixins'as *;
// 4. Include any optional Bootstrap components as you like
@use '../../node_modules/bootstrap/scss/containers' as *;
@use '../../node_modules/bootstrap/scss/grid' as *;
// 5. Optional for bootstrap
@use '../../node_modules/bootstrap/scss/accordion' as *;
@use '../../node_modules/bootstrap/scss/modal' as *;
但是我有一个错误说@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
这意味着样式表没有正确导入。
您知道在这种情况下如何使用 @use 而不是 @import 吗?谢谢!