我通过 miniCssExtract 和 sass-loader 将 svg 粘贴到 css 加载器(当然我在 main.js 中导入它),当我在 sass 文件中使用 url 函数时,我生成了 2 个文件(1 个普通 svg)和第二个带有字符串"export default __webpack_public_path__ + "3a93a0304bac6c9d74a5f25388ed6773.svg";"
那个浏览器说看不懂。
我浪费了 3 个小时的研究时间,我完成了,帮帮我!
webpack.config.js :
const path = require('path')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
module.exports = {
context: path.resolve(__dirname,"src",),
mode: "development",
entry: {
main: "./main.js"
},
output: {
filename: "[filename][contenthash].js",
path: path.resolve(__dirname,"dist"),
},
plugins: [
new CleanWebpackPlugin(),
new HTMLWebpackPlugin({
template:'index.html',
inject:"body",
}),
new MiniCssExtractPlugin(),
],
module: {
rules: [
{
test: /\.(png|jpe?g|gif|svg)$/i,
type: 'asset/resource',
use: {
loader: 'file-loader',
}
},
{
test: /\.s(a|c)ss$/i,
use:[MiniCssExtractPlugin.loader,"css-loader","sass-loader"],
}
]
}
}
主.js:import "./styles.sass"
import BG from "./assets/images/BG.svg"
样式.sass:// GENERAL START
*
margin: 0 0
padding: 0 0
user-select: none
html,body
width: 100%
height: 100%
overflow: hidden
box-sizing: border-box
// GENERAL END
// HEAD START
.header__
background-image: url(./assets/images/BG.svg)
.head__head
display: flex
// HEAD END
最佳答案
看起来问题出在文件加载器上。
css-loader 中有一个关于此问题的已解决问题
https://github.com/webpack-contrib/css-loader/issues/1358
尝试使用 https://webpack.js.org/guides/asset-modules/反而。
在您的情况下,删除“文件加载器”就足够了。
关于javascript - Webpack css-loader 生成错误的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68792443/