在支持 scss 的情况下，将 BootStrap 5 与 Adonis 和 Inertia 一起使用时出错

Question

在支持 scss 的情况下，将 BootStrap 与 Adonis 和 Inertia 一起使用时出错。

几天来我一直在努力让它发挥作用，但我做不到。下面是配置。

有人知道我该如何解决这个问题吗？

感谢您的关注

webpack.config.js

Encore.enableSassLoader()

应用程序.scss

@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';

$primary: #000;

@import '~bootstrap/scss/bootstrap';

错误

模块警告（来自 ./node_modules/sass-loader/dist/cjs.js）：弃用 不推荐将百分比单位传递给全局 abs() 函数。将来，这将发出一个由浏览器解析的 CSS abs() 函数。保留当前行为：math.abs(100%) 现在发出 CSS abs()：abs(#{100%}) 更多信息： https://sass-lang.com/d/abs-percent

resources\scss\app.scss 1:1 除法() node_modules\bootstrap\scss\mixins_grid.scss 59:12 row-cols() node_modules\bootstrap\scss\mixins_grid.scss 85:13 @content node_modules\bootstrap\scss\ mixins_breakpoints.scss 68:5 media-breakpoint-up() node_modules\bootstrap\scss\mixins_grid.scss 72:5 make-grid-columns() node_modules\bootstrap\scss_grid.scss 38:3 @import node_modules\bootstrap\scss\ bootstrap.scss 20:9 @import resources\scss\app.scss 9:9 根样式表 [ encore ] ./resources/scss/app.scss 中的警告 (./resources/scss/app.scss.webpack[javascript/auto ]!=!./node_modules/css-loader/dist/cjs.js??clonedRuleSet-13.use[1]!./node_modules/resolve-url-loader/index.js??clonedRuleSet-13.use[2 ]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-13.use[3]!./resources/scss/app.scss) 模块警告（来自 ./node_modules/sass-loader/dist/ cjs.js): 弃用 不推荐将百分比单位传递给全局 abs() 函数。将来，这将发出一个由浏览器解析的 CSS abs() 函数。保留当前行为：math.abs(100%) 现在发出 CSS abs()：abs(#{100%}) 更多信息： https://sass-lang.com/d/abs-percent

resources\scss\app.scss 1:1 除法() node_modules\bootstrap\scss\mixins_grid.scss 59:12 row-cols() node_modules\bootstrap\scss\mixins_grid.scss 85:13 @content node_modules\bootstrap\scss\ mixins_breakpoints.scss 68:5 media-breakpoint-up() node_modules\bootstrap\scss\mixins_grid.scss 72:5 make-grid-columns() node_modules\bootstrap\scss_grid.scss 38:3 @import node_modules\bootstrap\scss\ bootstrap.scss 20:9 @import resources\scss\app.scss 9:9 根样式表

Answer 1

在等待修复时，编辑：

node_modules/bootstrap/scss/mixins/_grid.scss

将百分比替换为相同的数字

结果

@mixin row-cols($count) {
  > * {
    flex: 0 0 auto;
    width: divide(1, $count);
  }
}