关于webpack css中url的问题

Question

我在某个css中写了一个背景图片，用到了url()引用相对路径的图片资源。
打包的时候我把图片转到别的文件夹下

但是打包后的css中的url不会自动变化，所以运行的时候会提示找不到图片。
请问这个问题如何解决？

Answer 1

css loader似乎确实不会处理这种情况，可以通过publicPath来解决，打包后的路径用绝对路径。

Answer 2

用 webpack 打包，css 中图片路径变化条件是：

1. 用 css-loader 告诉 webpack 怎么处理 css 文件。css-loader遇到类似 background-image: url(./img/xxx.png); 这种相对路径的 url 时，会依据 .png 这个拓展名，到 webpack 的配置中寻找，相应的 loader 来处理 .png 这种文件。

2. 显然，你这里有处理 .png 这种文件的方法，用 file-loader.

所以，应该是没问题。我这里是 OK 的。所以，你给份完整的 demo, 比如放云盘上。

Answer 3

如果是css文件且打包的时候报如下错误：

ERROR in ./~/css-loader?minimize!./~/postcss-loader!./static/css/icheck-skins/all.css
Module not found: Error: Cannot resolve 'file' or 'directory' ./minimal.png in /Users/spider/Desktop/StrategySeller/static/css/icheck-skins
 @ ./~/css-loader?minimize!./~/postcss-loader!./static/css/icheck-skins/all.css 6:180-204

使用resolve-url-loader可以解决你的问题。
参考配置如下：

    {
        test: /\.css/,
        loaders: ["style", "css?minimize","resolve-url-loader", "postcss"]
    }

Answer 4

原因：webpack并不会更改你源文件里的引用路径（hash模式也仅是更改文件名称）

解决：打包前和打包后的目录名约定一致即可

// 目录结构
src         // 源文件目录
    img     // 图片目录
    css     // css目录
    
dst         // 打包后的目录
    img     
    css    
    
    
// webpack 配置
{
    output: {
        ...
        publicPath: './'
    },
    ...
    module: {
        loaders: {
            ...
            {
              test: /\.(jpe?g|png|gif||svg)(\?v=\d+\.\d+\.\d+)?$/,
              loader: 'url-loader?name=img/[name].[hash].[ext]'
            }
        }
    }
} 

css文件里引用图片时用url('../img/*.png')