我用nextjs。我有这样的风格：
.img { background-image: url(path/to/my/svg/file.svg#icon);}
.img {
background-image: url(path/to/my/svg/file.svg#icon);
}
字符串当我运行npm run dev时，我得到了类名为“img”的元素的下一个样式：
npm run dev
.img { background-image: url(path/to/my/svg/file.jsbf730sh.svg);}
background-image: url(path/to/my/svg/file.jsbf730sh.svg);
型我丢失了#icon id。我认为这是因为scss编译器，但不能解决它。
#icon
t0ybt7op1#
您应该在SVG的Webpack模块规则中使用generator.filename和[fragment]替换：
generator.filename
[fragment]
module: { rules: [ { test: /\.(png|jpe?g|ico|svg)$/, type: 'asset/resource', generator: { // use the '[fragment]' to keep it in output filename, e.g. icons.svg#home filename: 'img/[name].[hash:8][ext][fragment][query]', }, }, ],},
module: {
rules: [
{
test: /\.(png|jpe?g|ico|svg)$/,
type: 'asset/resource',
generator: {
// use the '[fragment]' to keep it in output filename, e.g. icons.svg#home
filename: 'img/[name].[hash:8][ext][fragment][query]',
},
],
字符串
1条答案
按热度按时间t0ybt7op1#
您应该在SVG的Webpack模块规则中使用
generator.filename和[fragment]替换：字符串