如何在css中使用图片与Webpack
如何在css中使用图片与Webpack
提问于 2016-02-13 02:09:45
我正在和Webpack一起做一个React设置，并且正在努力做看起来应该是一项简单的任务。我想让webpack包含一些图片，并且最小化它们，就像我吞咽一样，但我想不出来。我只想能够像这样在我的css中链接一个图像：
/* ./src/img/background.jpg */
body { background: url('./img/background.jpg'); }我所有的css/js/img文件夹都在一个src文件夹中。Webpack输出到dist文件夹，但我不知道如何在那里获得图像。
这是我的webpack设置：
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
devtool: 'cheap-eval-source-map',
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/dev-server',
'./src/index.js'
],
output: {
path: path.join(__dirname, 'dist'),
// publicPath: './dist',
filename: 'bundle.js'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
module: {
loaders: [{
exclude: /node_modules/,
test: /\.js?$/,
loader: 'babel'
}, {
test: /\.scss$/,
loader: 'style!css!sass'
}, {
test: /\.(png|jpg)$/,
loader: 'file-loader'
}]
},
devServer: {
historyApiFallback: true,
contentBase: './dist',
hot: true
}
};回答 2
Stack Overflow用户
回答已采纳
发布于 2016-02-13 02:26:58
我遇到了类似的问题，发现您可以使用url-loader来解析CSS中的"url()"语句，就像任何其他的require或import语句一样。
要安装它，请执行以下操作：
npm install url-loader --save-dev
它将安装可以将解析的路径转换为BASE64字符串的加载器。
在您webpack配置文件中使用装载器中的url-loader
{
test: /\.(png|jpg)$/,
loader: 'url-loader'
}另外，请确保您正确指定了公共路径和要加载的图像的路径。
Stack Overflow用户
发布于 2020-04-04 20:17:14
在scss文件中使用background-image: url('./img/background.jpg')对我有效，不需要url-loader。只有.png|.jpg|的文件加载器...等。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35369419
复制相关文章
相似问题