运行webpack生产构建时出现Sass弃用警告求助

问题详情 #

执行命令 webpack --mode production --color --progress 时，触发以下Sass弃用警告：

SassWarning: Deprecation $weight: Passing a number without unit % (100) is deprecated

当前环境配置：

• Bootstrap v5.2.2
• Sass v1.56.0

完整package.json内容如下：

{
  "name": "xx",
  "version": "1.0.0",
  "description": "xx",
  "main": "index.js",
  "author": "xxx",
  "private": true,
  "scripts": {
    "build": "webpack --mode production --color --progress",
    "watch": "webpack --mode development --color --devtool inline-source-map --hide-modules -w",
    "debug": "webpack --mode development --progress --color --devtool inline-source-map --debug --display-error-details --output-pathinfo --display-chunks -w"
  },
  "devDependencies": {
    "@babel/core": "^7.20.2",
    "@babel/preset-env": "^7.20.2",
    "@popperjs/core": "^2.11.6",
    "acorn": "^8.8.1",
    "ajv": "^8.11.0",
    "autoprefixer": "^10.4.13",
    "babel-loader": "^9.1.0",
    "babel-polyfill": "^6.26.0",
    "bootstrap": "^5.2.2",
    "bootstrap-input-spinner": "^3.1.13",
    "bourbon": "^7.2.0",
    "browser-sync": "^2.27.10",
    "browser-sync-webpack-plugin": "^2.3.0",
    "bs-custom-file-input": "^1.3.4",
    "clean-webpack-plugin": "^4.0.0",
    "css-loader": "^6.7.1",
    "eslint": "^8.27.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-plugin-html": "^7.1.0",
    "eslint-plugin-import": "^2.26.0",
    "expose-loader": "^4.0.0",
    "file-loader": "^6.2.0",
    "lighthouse": "^9.6.8",
    "mini-css-extract-plugin": "^2.6.1",
    "npm-run-all": "^4.1.5",
    "postcss-loader": "^7.0.1",
    "sass-loader": "^13.1.0",
    "style-loader": "^3.3.1",
    "stylelint": "^14.14.1",
    "stylelint-checkstyle-formatter": "^0.1.2",
    "stylelint-config-twbs-bootstrap": "^6.0.0",
    "terser-webpack-plugin": "^5.3.6",
    "url-loader": "^4.1.1",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.1",
    "webpack-remove-empty-scripts": "^1.0.1"
  },
  "dependencies": {
    "axios": "^1.1.3",
    "browserslist": "^4.21.4",
    "caniuse-lite": "^1.0.30001431",
    "card": "^2.5.4",
    "core-js": "^3.26.0",
    "iban": "0.0.14",
    "intl-tel-input": "^17.0.19",
    "js-base64": "^3.7.2",
    "qs": "^6.11.0",
    "sass": "^1.56.0"
  },
  "old": {
    "lighthouse": "^5.1.0",
    "vanilla-lazyload": "^8.17.0"
  },
  "boutique": {
    "jquery.panzoom": "^3.2.2"
  }
}

问题原因 #

Sass 1.56.0开始弃用「给$weight参数传递不带%单位的数字」的写法，而Bootstrap 5.2.2的Sass代码中仍存在此类写法（如传递100而非100%），编译时触发警告。

解决方法 #

1. 升级Bootstrap到兼容版本 #

将Bootstrap升级至v5.3.0及以上版本，官方已在这些版本中修复该问题，适配了Sass的新规则。执行命令：

npm update bootstrap

2. 降级Sass版本 #

若暂时无法升级Bootstrap，可将Sass降级到1.55.x版本（该版本尚未启用此弃用警告）：

npm install sass@^1.55.0 --save-exact

3. 手动覆盖Bootstrap变量 #

找到Bootstrap中使用无单位$weight的变量，手动补充%单位。例如在自定义Sass文件中添加：

// 覆盖Bootstrap相关变量，确保带%单位
$font-weight-bold: 100% !default;
// 根据警告提示的具体变量，补充其他需要覆盖的内容

内容的提问来源于stack exchange，提问作者Malek Ben el ouafi