Question

我使用 npm 安装 bootstrap 并使用 scss 导入它但是当我尝试编译时，它只会显示无尽的警告

npm install bootstrap

app.scss 文件

@import "~bootstrap/scss/bootstrap";

当我运行 dev

npm run dev

然后我看到带有此警告的 Endless loop

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 4)

More info and automated migrator: https://sass-lang.com/d/slash-div

    ╷
253 │   1: $spacer / 4,
    │      ^^^^^^^^^^^
    ╵
    node_modules\bootstrap\scss\_variables.scss 253:6  @import
    node_modules\bootstrap\scss\bootstrap.scss 11:9    @import
    resources\css\app.scss 2:9                         root stylesheet

我的 webpack.mix

mix.js('resources/js/app.js', 'public/js')
.sass('resources/css/app.scss', 'public/css', [
    //
]);

Answer 1

正如 Brian Hannay 在评论中提到的，要降级到包的特定版本，在这种情况下为 SASS，您应该：

将 package.json 中的 "sass": "^1.33.0", 更改为 "sass": "1.32.13",。
删除 package-lock.json
删除 node_modules 文件夹
运行 npm install

请注意，这将更新 NPM 中的所有其他软件包。如果您不想这样做，只需从 package-lock.json 和 node_modules 中的特定文件夹中删除“sass”。

Answer 2

如 SASS documentation 中所述，您可以使用 Sass 迁移器自动更新样式表以使用 math.div()。

$ npm install -g sass-migrator

$ sass-migrator division **/*.scss

Answer 3

将 quietDeps 添加到您的 sass-loader 配置中。

mix.js('resources/js/app.js', 'public/js')
.sass('resources/scss/app.scss', 'public/css', {
  sassOptions: {
    quietDeps: true,
  },
})

Laravel 混合 | Bootstrap 弃用警告：不推荐使用 / 进行除法并将被删除

3 个答案: