迷糊K

发布：2021-08-16 12:11
更新：2022-11-30 00:46
阅读：1153

【报Bug】H5使用svg-sprite-loader报Failed to resolve loader: svg-sprite-loader

分类：uni-app

bug反馈

产品分类： uniapp/H5

PC开发环境操作系统： Windows

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

HBuilderX类型：正式

HBuilderX版本号： 3.1.22

浏览器平台： Chrome

浏览器版本： 91.0.4472.124

项目创建方式： HBuilderX

示例代码：

vue.config.js


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()  
  }  
}

package.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.

2021-08-16 12:11 负责人:无分享

2 个回复

SilenceS

请问解决了吗

天天打酱油 - 广告位招租 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()  
  }  
}

该问题目前已经被锁定, 无法添加新回复

【报Bug】H5使用svg-sprite-loader报Failed to resolve loader: svg-sprite-loader

vue.config.js

package.json

操作步骤：

npm install后运行到浏览器

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描述：

2 个回复

公告

相关问题

【报Bug】H5使用svg-sprite-loader报Failed to resolve loader: svg-sprite-loader

vue.config.js

package.json

操作步骤： npm install后运行到浏览器

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描述：

与内容相关的链接

2 个回复

公告

相关问题

操作步骤：

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.