[英]Resolving css background-image url with Webpack
我正在使用 webpack 并只是尝试将url
属性中指定的background-image
应用于 html 元素。
我看过几个线程(例如这个线程),但没有找到适合我的东西。
这是我的设置:
// 索引.js
import React from 'react'
import styles from './styles.css'
const MyComponent = () => {
return (
<div className={styles.container}></div>
)
}
export default MyComponent
// styles.css
.container {
background-image: url('../../../static/public/images/my-background.jpg');
}
// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
entry: path.join(__dirname, "src", "index.js"),
output: {
path: path.join(__dirname, "dist"),
filename: "index.bundle.js"
},
mode: process.env.NODE_ENV || 'development',
resolve: {
modules: [path.resolve(__dirname, "src"), "node_modules"],
},
devServer: {
static: path.join(__dirname, 'src')
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, "src", "index.html"),
}),
new CopyWebpackPlugin({
patterns: [
{
from: 'static',
to: 'static'
}
]
})
],
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ["babel-loader"]
},
{
test: /\.(css)$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(jpg|png|svg|gif)$/,
use: ['url-loader', 'file-loader'],
},
],
},
}
但是,当我尝试拨打 url 时,我看到的只是一个白色的小方块……
这绝对不是图像。 我确实在./dist/static/public/images/my-background.jpg
中找到了我的构建中的图像
注意图片有大尺寸:3842×2162
我认为这与 webpack 加载程序配置有关,但并没有完全找到如何调整它以使其在此处工作。 任何帮助将不胜感激!
您可能正在使用新版本的 Webpack,其中url-loader
和file-loader
已弃用,而Asset Modules
是替代品。
尝试使用:
{
test: /\.(jpg|png|svg|gif)$/,
type: 'asset/resource',
},
反而。
欲了解更多信息,请单击此处。
我遇到了同样的问题,它最终通过使用~
来引用项目目录并从那里访问public
来工作。
background-image: url("~/public/images/person.png");
这对我来说很好:)
或者,另一种选择是将图像移动到src
目录,webpack 会将它们打包到一个名为static/media
的文件夹中作为静态文件
解决方案(使用 webpack 5.0 之前的版本)是关闭css-loader
的 URL 解析,因为 webpack 构建时 CSS 文件没有更新 URL 字符串
module.exports = {
...
module: {
rules: [
{ //https://webpack.js.org/loaders/css-loader/
test: /\.css$/,
use: ["style-loader"]
},
{ //https://webpack.js.org/loaders/css-loader/
test: /\.css$/,
loader: "css-loader",
options: {
url: false,
}
}
]
}
}
请注意,这将使 .css 中使用的文件不会被散列,并且在将项目构建到 /dist/ 文件夹时,其结构将类似于原始 /public/ 文件夹。 这就是它起作用的原因。
有关参考,请参阅此 github 问题和此问题
另外,我正在使用:
更新:使用“url-loader”的规则 object 可能会覆盖其他规则中的文件。 所以,在那种情况下,你应该删除它并在 'css-loader' 中有这样的选项:
{
test: /\.css$/,
loader: "css-loader",
options: {
url: true,
esModule: false
}
}
尝试注释掉每个选项和规则并查看结果以检查每个选项和规则的作用。 在每次构建之前删除 .dist/ 文件夹(因为它不会在每次构建后自动清理)以确保您知道生成了哪些文件以及何时生成。
我刚刚从 webpack v4 升级到 v5,根据 webpack 图像资产管理文档,我必须确保 css 文件中的图像实际上位于我所说的位置,而不是它们将位于的位置。
因此,从:
...
background: url(/static/images/header.jpg)
...
到:
...
background: url(/images/header.jpg)
...
到处都为我解决了这个问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.