我正在使用图片在我的样式表(less)中,通过以下方式完成:
.foo { background: url('../images/foo.png') }
使用HMR时,它们被编码为base64格式并嵌入到样式表中,这对我来说没问题。但在生产环境下编译时,我不希望图像被嵌入到样式表中。我尝试过使用url-loader和file-loader。使用url-loader时,我无法正确地发出图像。如果我不设置限制,则文件会被发出到
output/images/
并具有正确的大小但不是有效的图像。如果我将限制设置为小于8k,则图像将被发出到output
并且正确。在任一情况下,发出的图像都会出现在CSS中,例如(当使用limit=1
的url-loader时):url(data:image/png;base64,bW9kdWxlLmV4cG9ydHMgPSBfX3dlYnBhY2tfcHVibGljX3BhdGhfXyArICJhMDdjZWVkMGRiZTNlMjk5ODY5NWQ3ZjM4MzYxZDY1Zi5wbmciOw==);
解码后为:module.exports = __webpack_public_path__ + "a07ceed0dbe3e2998695d7f38361d65f.png";
如何让css使用URL而不是尝试对值进行base64编码?
这是我的webpack(仍在使用webpack 1)loaders配置:
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css!postcss'),
},
{
test: /\.less$/,
loader: ExtractTextPlugin.extract('style-loader', 'css!less!postcss'),
},
{
test: /\.(png|jpg|gif)$/,
loader: 'file-loader?name=/images/[name].[ext]'
}
更新:事实证明,禁用less-loader会阻止使用url-loader时对URL进行编码(但图像仍无效),但使用file-loader则不会。
更新2:在css!less!postcss
加载器的末尾添加了一个自定义加载器,源代码仍然具有../images/foo.png
的图像URL,因此问题似乎更深入。还尝试删除ExtractTextPlugin
,但编译后的JS文件中的图片导出值仍然像CSS一样进行了Base64编码。