3

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

.foo { background: url('../images/foo.png') }

使用 HMR 时，它们被 base64 编码到我很好的样式表中。但是，在为生产进行编译时，我希望图像不要嵌入到样式表中。我已经尝试过url-loader和file-loader。

使用 url-loader 我无法让它正确地发出图像。如果我没有设置限制，那么文件将被发送到output/images/并具有正确的大小，但不是有效的图像。如果我将限制设置为小于 8k 的图像，则会发出output并纠正图像。

在任何一种情况下，发出的图像都会像这样出现在 CSS 中（例如使用 url-loader 时limit=1）：

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

更新：原来禁用less-loader会在使用 url-loader 时停止对 URL 进行编码（但图像仍然无效），但在使用 file-loader 时不会。

更新 2：在加载器末尾添加了一个自定义加载器，css!less!postcss并且源仍然具有的图像 URL，../images/foo.png因此看起来问题更进一步。还尝试删除ExtractTextPlugin但为图像编译的 JS，然后像 CSS 一样具有用于导出的 Base64 编码值。

4

1 回答 1

1

似乎有 2 个 ExtractTextPlugins（因为css&less测试导致了问题），因为我没有任何 css 文件，我删除了第一个文件，现在它按预期工作。

于 2017-02-16T04:33:46.173 回答