我在我的样式表中使用图像(更少):
.foo { background: url('../images/foo.png') }
当使用 HMR 时,它们被 base64 编码到样式表中,我对此很满意。但是,在为生产编译时,我希望图像不嵌入样式表中。我都试过了 url-loader和 file-loader .
使用 url-loader 我无法让它正确地发出图像。如果我没有设置限制,那么文件将被发送到 output/images/
并且具有正确的大小但不是有效图像。如果我将限制设置为小于 8k,图像将被发送到 output
并进行更正。
在任何一种情况下,发出的图像都会像这样出现在 CSS 中(例如使用带有 limit=1
的 url-loader 时):
url(数据:图像/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 编码值。
最佳答案
似乎有 2 个 ExtractTextPlugins(对于 css
和 less
测试导致了问题)因为我没有任何 css 文件我删除了第一个和它现在按预期工作。
关于css - CSS 中的 Webpack 文件加载器和图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42264277/