Question

我正在使用Webpack来处理我的CSS文件。我想在CSS文件中重写url()以继续引用原始资产，只需更改URL。

例如此文件：

/* src/main.css */
body {
    background-image: url('image.png');
}

应编译到此

/* bundle/main.css */
body {
    background-image: url('../src/image.png');
}

我找到了rewrite-url-loader，但这对我来说根本不起作用，它什么也没做。

我觉得file-loader可以做我想做的事，但我无法弄明白。

有人有个主意吗？

Answer 1

实际上这很容易。

我必须设置Webpack的context选项以指向我的项目根。
然后我可以轻松地使用这样的文件加载器：file?emitFile=false&name=[path][name].[ext]&publicPath=../。

Answer 2

对于Webpack 2和Webpack 3：

use: [{
  loader: 'file-loader',
  options: {
    context: path.resolve(__dirname, 'src')
    name: '[path][name].[ext]'
  },
},