英文:
How can i use svg file in scss file?
问题
我在src/assets目录中有icon.svg文件。
我想在某个scss文件中使用这个svg文件。
像这样：
select {
background: url("/src/assets/icon.svg") no-repeat ...;
}
但是它不起作用，我可以看到这个错误：
ERROR in ./src/components/atoms/Common/Dropdown/styles.module.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[8].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[8].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[8].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[8].use[4]!./src/components/atoms/Common/Dropdown/styles.module.scss) 5:36-104
我尝试过以下方法：
background: url("data:image/svg+xml;, /src/assets/icon.svg")
background: url(`data:image/svg+xml;, ${/src/assets/icon.svg}`)
background: url("data:image/svg+xml;" + "/src/assets/icon.svg")
最后我通过以下方法解决了这个问题：
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18.258' height='10.164' viewBox='0 0 18.258 10.164'%3E%3Cg id='dropdown_icon' transform='translate(1.06 1.061)'%3E%3Cpath id='dropdown_icon-2' data-name='dropdown_icon' d='M-.09.18,8.264,8.371-.09,16.316' transform='translate(16.316 0.09) rotate(90)' fill='none' stroke='%23333d4b' strokeLinecap='round' strokeLinejoin='round' strokeWidth='1.5' /%3E%3C/g%3E%3C/svg%3E")
但我不想要这个。我想要一个简短的代码来使用我的svg文件。
我该怎么办？
英文:
I have icon.svg in src/assets directory.
And I want to use this svg file in some scss file.
like this
select {
background: url("/src/assets/icon.svg") no-repeat ...;
}
but it doesn't work. and i can see this error
ERROR in ./src/components/atoms/Common/Dropdown/styles.module.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[8].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[8].use[2]!./node_modules/resolve-url-loader/index.js??ruleSet[1].rules[1].oneOf[8].use[3]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[8].use[4]!./src/components/atoms/Common/Dropdown/styles.module.scss) 5:36-104
i have tried these:
background: url("data:image/svg+xml;, /src/assets/icon.svg")
background: url(`data:image/svg+xml;, ${/src/assets/icon.svg}`)
background: url("data:image/svg+xml;" + "/src/assets/icon.svg")
and finally i solved this problem to this
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18.258' height='10.164' viewBox='0 0 18.258 10.164'%3E%3Cg id='dropdown_icon' transform='translate(1.06 1.061)'%3E%3Cpath id='dropdown_icon-2' data-name='dropdown_icon' d='M-.09.18,8.264,8.371-.09,16.316' transform='translate(16.316 0.09) rotate(90)' fill='none' stroke='%23333d4b' strokeLinecap='round' strokeLinejoin='round' strokeWidth='1.5' /%3E%3C/g%3E%3C/svg%3E")
but i don't want this. i want short code with using my svg file.
How can i do?
答案1
得分: 0
你应该能够使用相同的 URL 来完成它。
我认为你可以使用 (/assets/icon.svg)。
尝试这样做：
.select {
display: block;
content: '' '';
background-image: url('/assets/icon.svg');
background-size: 50px 50px;
height: 50px;
width: 50px;
}
英文:
You should be able to do it with the same url.
I think you can use (/assets/icon.svg).
try this:
.select {
display: block;
content: ' ';
background-image: url('/assets/icon.svg');
background-size: 50px 50px;
height: 50px;
width: 50px;
}
答案2
得分: 0
这看起来像是一个 webpack 错误。尝试使用适当的 svg 加载器，例如：svg-url-loader。
祝你好运！
英文:
This looks like a webpack error. Try appropriate svg loaders like: svg-url-loader.
Good luck!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论