的WebPack文件加载器和图像CSS

我使用的图像在我的样式表（少）细做：的WebPack文件加载器和图像CSS

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

当使用HMR他们编码成我没事关于样式表的base64 。但是，编译生产时，我希望图像不要嵌入到样式表中。我试过url-loader和file-loader。

使用url-loader我无法让它正确发出图像。如果我设置了无限制，那么这些文件被发送到output/images/，并且尺寸合适但是不是有效的图像。如果我将限制设置为小于8k的值，则图像会发射到output并更正。

在这两种情况下发出的图像出现在CSS像这样（例如使用URL装载机当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加载器（当被编码的网址，但该图像仍然无效），但不是在使用文件加载器时。

更新2：添加在css!less!postcss装载机的最后一个自定义的加载和源仍然有../images/foo.png图像URL所以会出现这个问题是进一步向下行。还尝试删除ExtractTextPlugin，但编译后的JS图像具有像CSS这样的导出的Base64编码值。

来源

2017-02-16 DEfusion

似乎具有2个ExtractTextPlugins（用于css & less试验造成的问题），因为我没有我删除了第一任的CSS文件和它现在按预期工作。

来源

2017-02-16 04:33:46 DEfusion

的WebPack文件加载器和图像CSS

回答

相关问题