无法使用svg-sprite-loader
8***@qq.com
- 发布：2020-06-20 16:05
- 更新：2022-11-30 00:48
- 阅读：3319
产品分类： uniapp/H5
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： 正式
HBuilderX版本号： 2.7.14
浏览器平台： Chrome
浏览器版本： 83.0.4103.61
项目创建方式： HBuilderX
操作步骤：
预期结果：
可以正常使用svg图标
可以正常使用svg图标
实际结果：
无论是添加到dependencies还是devDependencies，控制台一直报Failed to resolve loader: svg-sprite-loader。图标自然也就无法加载出来
无论是添加到dependencies还是devDependencies，控制台一直报Failed to resolve loader: svg-sprite-loader。图标自然也就无法加载出来
bug描述：
想在项目中使用svg文件，但无论怎么尝试，都是提示Failed to resolve loader: svg-sprite-loader
调整你的vue.config.js，svg-sprite-loader的配置，用绝对地址
-
-
8***@qq.com (作者)
function resolve(dir) {
return path.join(__dirname, dir)
}
有demo或者代码段可以分享一下吗，多谢多谢。2020-07-10 16:43
天天打酱油 - 广告位招租 dcloud.net.cn
用以下代码试试，我已经跑起来了
'use strict'
const path = require('path')
function resolve(dir) {
return path.join(__dirname, dir)
}
module.exports = {
configureWebpack: {
// provide the app's title in webpack's name field, so that
// it can be accessed in index.html to inject the correct title.
resolve: {
alias: {
'@': resolve('./')
}
}
},
chainWebpack(config) {
// set svg-sprite-loader
config.module
.rule('svg')
.exclude.add(resolve('icons'))
.end()
config.module
.rule('icons')
.test(/\.svg$/)
.include.add(resolve('icons'))
.end()
.use('svg-sprite-loader')
.loader(path.resolve(__dirname, './node_modules/svg-sprite-loader'))
.options({
symbolId: 'icon-[name]'
})
.end()
}
}
gftttrrtrt4
uniapp不支持svg标签，有使用的办法吗？
2020-06-26 09:54
8***@qq.com (作者)
回复 gftttrrtrt4: 因为微信小程序的问题，我们i当前还是采用所有图标用png，上线前做成雪碧图这种方式。
2020-07-10 16:41