webpack 配置下 scss 文件 background-image 的 url 无法正常解析求助

根因分析 #

1. scss中使用多层相对路径引用图片时，sass编译后路径计算会与预期不符，导致webpack无法正确定位资源
2. webpack.dev.js中devServer.static配置重复错误，静态资源服务路径异常
3. url-loader缺少资源输出路径配置，大于8kb的图片打包后存放路径不固定，无法与请求路径匹配

解决方案 #

步骤1：修正devServer配置

修改webpack/webpack.dev.js中devServer字段，删除重复配置：

// 顶部先引入path
const path = require("path");

module.exports = merge(base, {
  // 其余配置保持不变
  devServer: {
    port: 3000,
    static: path.resolve(__dirname, '../dist'),
    historyApiFallback: true
  },
});

步骤2：调整loader配置

修改webpack/webpack.base.js中css和图片相关loader的配置：

// scss处理规则修改css-loader配置
{
  test: /\.(sa|sc|c)ss$/,
  use: [
    "style-loader",
    {
      loader: "css-loader",
      options: {
        esModule: false
      }
    },
    "sass-loader",
    {
      loader: "sass-resources-loader",
      options: {
        resources: ["./src/assets/scss/main.scss"],
      },
    }
  ]
},
// 图片处理规则修改url-loader配置
{
  test: /\.(png|jpg|gif)$/i,
  use: [
    {
      loader: "url-loader",
      options: {
        limit: 8192,
        name: "static/images/[name].[hash:8].[ext]",
        esModule: false
      },
    },
  ],
}

步骤3：优化scss中图片路径写法

直接用已配置的@别名引用资源，避免相对路径计算错误，注意别名前加~标识webpack路径解析：

background-image: url("~@/assets/images/home/banner-mobile.png");

内容的提问来源于stack exchange，提问作者CCCC