Question

我正在使用样式表（更少）中的图像：

.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上）加载器配置：

{
    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]'
}

更新：在使用url-loader时禁用less-loader停止编码URL（但图像仍然无效），但在使用文件加载程序时则不行

更新2 ：在css!less!postcss加载程序末尾添加了自定义加载程序，源代码的网址仍为../images/foo.png，因此问题显示问题进一步严重这条线。还尝试删除ExtractTextPlugin，但是为图像编译的JS然后像CSS一样具有导出的Base64编码值。

Answer 1

似乎有2个ExtractTextPlugins（用于Person＆amp; css测试导致问题）因为我没有任何css文件我删除了第一个它现在按预期工作

CSS中的Webpack文件加载器和图像

1 个答案: