在Webpack中通过Sass加载图片失败的问题求助

嘿，看起来你在通过Sass引用图片时遇到了路径解析的麻烦，结合你给出的Webpack配置片段，我来帮你梳理几个可行的解决思路：

1. 先确认相对路径的层级是否正确 #

首先得核对你的.scss文件所在位置，和public/images/logo.png的实际层级关系是否匹配你写的../../../public/images/logo.png。举个例子，如果你的项目结构是这样的：

项目根目录/
├── public/
│   └── images/
│       └── logo.png
└── src/
    └── styles/
        └── components/
            └── navbar.scss

那从navbar.scss到logo.png的相对路径确实是../../../public/images/logo.png，但如果你的scss文件位置有变化，这个路径就得跟着调整——别小看这个，很多时候路径问题都是层级数错了导致的。

2. 给Webpack加上图片资源处理规则 #

你现在的Webpack配置里好像没提到图片文件的处理，这会导致Webpack无法识别Sass里的url()引用的图片。你需要添加file-loader或者url-loader的规则，比如：

module: {
  rules: [
    // 保留你现有的js、scss规则...
    {
      test: /\.(png|jpg|gif|svg)$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'images/', // 打包后图片会输出到dist/images/目录下
            publicPath: '../images/' // 关键！如果你的css被打包到dist/css/，引用图片得往上跳一级找images/
          }
        }
      ]
    }
  ]
}

这里的publicPath一定要根据你的打包输出结构来调整：比如如果css文件被ExtractTextPlugin输出到dist/css/，图片在dist/images/，那css里引用图片的路径就得是../images/logo.png，所以publicPath设为../images/就对了。

3. 调整ExtractTextPlugin的publicPath配置 #

你用了ExtractTextPlugin提取css到单独文件，这个插件本身的publicPath也会影响资源引用路径。记得在配置里加上它：

ExtractTextPlugin.extract({
  fallback: 'style-loader',
  use: ['css-loader', 'sass-loader'],
  publicPath: '../' // 如果css在子目录下，这个配置会修正url()的基准路径
})

当css被提取到子目录（比如css/）时，默认的资源引用路径会基于css文件的位置，加上publicPath: '../'就能让url()指向正确的上级目录。

4. 用别名简化路径（可选） #

如果不想纠结相对路径的层级，可以给Webpack配置一个别名，把项目的public目录映射成一个简短的标识：

resolve: {
  alias: {
    '@public': path.resolve(__dirname, 'public')
  }
}

然后在Sass里就可以这么写了：

$navbar-brand-logo: url('~@public/images/logo.png') !default;

注意这里的~符号很重要，它告诉Webpack这是一个模块别名，不是普通的相对路径。

最后再试个小技巧：简化Sass里的路径写法 #

其实不用写那么长的相对路径，只要Webpack配置正确，你可以直接写相对于当前scss文件的路径，比如如果你的scss文件在src/styles/，那路径可以写成../../public/images/logo.png，Webpack会自动帮你解析成正确的打包后路径。

总的来说，核心问题就是Webpack需要明确知道怎么处理图片资源，同时要让Sass里的路径写法和Webpack的路径解析规则匹配，按上面的步骤调整应该就能解决啦！

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