uni-app H5使用svg-sprite-loader报错 Failed to resolve loader: svg-sprite-loader

开发环境	版本号	项目创建方式
Windows	win10 1909	HBuilderX

产品分类：uniapp/H5

PC开发环境操作系统：
Windows

PC开发环境操作系统版本号：
win10 1909

HBuilderX类型：
正式

HBuilderX版本号：
3.1.22

浏览器平台：
Chrome

浏览器版本：
91.0.4472.124

项目创建方式：
HBuilderX

示例代码：

vue.config.js

```javascript function resolve (dir) { return path.join(__dirname, dir) }

const ignored = [’/uni_modules//.md’, ‘/uni_modules//package.json’, '**/uni_modules//uniCloud/**/*’]
module.exports = {
configureWebpack() {
return {
watchOptions: {
ignored
},
devServer: {
watchOptions: {
ignored
}
}
}
},
chainWebpack(config) {
// config.plugins.delete(‘preload’) // TODO: need test
// config.plugins.delete(‘prefetch’) // TODO: need test

// set svg-sprite-loader  
config.module  
  .rule('svg')  
  .exclude.add(resolve('assets/icons'))  
  .end()  
config.module  
  .rule('icons')  
  .test(/\.svg$/)  
  .include.add(resolve('assets/icons'))  
  .end()  
  .use('svg-sprite-loader')  
  .loader('svg-sprite-loader')  
  .options({  
    symbolId: 'icon-[name]'  
  })  
  .end()

}
}

<h3>package.json</h3>
```json
"dependencies": {  
        "element-ui": "2.15.5",  
        "fuse.js": "3.4.4",  
        "js-cookie": "^2.2.1",  
        "normalize.css": "^8.0.1",  
        "nprogress": "^0.2.0",  
        "screenfull": "4.2.0",  
        "uni-simple-router": "^1.5.3"  
    },  
    "devDependencies": {  
        "svg-sprite-loader": "^5.1.1"  
    }

操作步骤：

npm install后运行到浏览器

预期结果：

svg图标class正常显示

实际结果：

11:51:47.815 Failed to resolve loader: svg-sprite-loader
11:51:47.821 You may need to install it.

bug描述：

``` 11:51:47.815 Failed to resolve loader: svg-sprite-loader 11:51:47.821 You may need to install it.

更多关于uni-app H5使用svg-sprite-loader报错 Failed to resolve loader: svg-sprite-loader的实战教程也可以访问 https://www.itying.com/category-93-b0.html

h691938207 1楼

请问解决了吗

更多关于uni-app H5使用svg-sprite-loader报错 Failed to resolve loader: svg-sprite-loader的实战教程也可以访问 https://www.itying.com/category-93-b0.html

nodeper 2楼

用我这个 ‘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()
}
}

caililin 3楼

这个错误是因为在uni-app项目中，svg-sprite-loader的配置方式需要特别注意。uni-app内置的webpack配置会与自定义配置产生冲突。

主要问题在于：

uni-app的默认配置：uni-app已经内置了对svg文件的处理规则，你的配置没有完全排除默认规则的影响。
HBuilderX项目结构：通过HBuilderX创建的项目，webpack配置的修改方式需要适配uni-app的构建流程。

解决方案：

修改你的vue.config.js配置：

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  chainWebpack(config) {
    // 关键：先删除默认的svg规则
    config.module.rules.delete('svg')
    
    // 重新添加svg规则
    config.module
      .rule('svg')
      .exclude.add(resolve('assets/icons'))
      .end()
    
    // 添加icons规则
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('assets/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  }
}

如果上述配置仍然报错，可以尝试更彻底的解决方案：

module.exports = {
  chainWebpack(config) {
    // 清除所有svg相关的loader
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    
    // 添加新的svg处理规则
    svgRule
      .exclude.add(resolve('assets/icons'))
      .end()
    
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('assets/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  }
}