使用 svg-sprite-loader 编译时错误 node_modules/svg-sprite-loader/lib/loader.js

最新推荐文章于 2024-08-10 14:10:41 发布
最新推荐文章于 2024-08-10 14:10:41 发布
阅读量473 收藏
点赞数
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dallasnash/article/details/131759503
版权

Webpack 5 with svg-sprite-loader@6.0.0 compilation error

npm install svg-sprite-loader -D
# via yarn
yarn add svg-sprite-loader -D

Vue2搭建基础架构（8）--- 使用svg-sprite-loader
weixin_48040732的博客
01-14 937
这里记录下自己在Vue2的项目使用svg-sprite-loader来全局使用svg雪碧图，方便以后直接使用。这里是将之前Vue3的基础架构转为Vue2语法开发。
vue封装 svg-icon组件 并 vue/cli4配置 svg-sprite-loader, 报错：resolve is not defined
weixin_45748897的博客
01-06 6705
1，vue中封装svg-icon组件 使用原因 1，svg是矢量图， 不会因为尺寸方法和缩小而失真 2， 阿里图库可以直接粘贴获取 svg 图标代码，方便快捷 3，封装为组件后，更容易操作 接下来我们一起来创造它吧 1，创建组件，首先在components文件夹下创建一个名为SvgIcon的文件夹，在此文件夹下创建 index.vue文件，如图： comoponets/SvgIco...
使用svg-sprite-loader遇到的问题
weixin_44761091的博客
04-20 1213
由于vue cli默认已经对svg做了处理，所以在使用svg-sprite-loader时有冲突导致图标不能正常显示。然而不仅如此，在改动过老项目的时候，svg多处被用作图片/字体图标使用。对svg做的处理，正则匹配后缀名为.svg的文件，匹配成功之后使用 url-loader 进行处理。加载器用起来真香，配置起来也很简单，网上有很多教程，再=在此就不追述了；仅记录一下我在配置时踩的坑。文件放到不同的目录中，配置不同的。(作为icon的svg)通过上面的配置不同的。
Uncaught Error: Module build failed (from ./node_modules/svg-sprite-loader/lib/loader.js)
ranmaxli的博客
10-08 927
【代码】Uncaught Error: Module build failed (from ./node_modules/svg-sprite-loader/lib/loader.js)
Uncaught Error: Module build failed (from ./node_modules/svg-sprite-loader/lib/loader.js): Error: [o
ATM_09的博客
09-13 4239
拉取项目之后出现这个问题说我的postcss的版本问题 Uncaught Error: Module build failed (from ./node_modules/svg-sprite-loader/lib/loader.js): Error: [object Object] is not a PostCSS plugin 实在没办法了 yarn npm 百度 什么办法都不行 就是报错 我可怜的头发已经所剩无几 解决: ming-zi就是加的名字 加名字就解决了 git clone https://
Module build failed (from ./node_modules/_svg-sprite-loader@3.9.2@svg-sprite-loader/lib/loader.js):
qq_29118071的博客
12-03 4295
Vue-cli3使用svg-sprite-loader 报错
nuxt-svg-sprite-loader:用于svg-sprite-loader的Nuxt.js模块
03-17
用于svg-sprite-loader的Nuxt.js模块。 安装 # npm $ npm install nuxt-svg-sprite-loader # Yarn $ yarn add nuxt-svg-sprite-loader 用法 该模块添加到您Nuxt.js模块列表nuxt.config.js ： export default { .....
VUE-cli3使用 svg-sprite-loader
10-17
svg-sprite-loader 的插件，用来根据导入的 svg 文件自动生成 symbol 标签并插入 html，这篇文章主要介绍了VUE-cli3使用 svg-sprite-loader,需要的朋友可以参考下
如何使用vite-svg-loader
02-23
"使用 Vite-SVG-Loader 实现 SVG 图像的轻量级引入" 在现代 Web 开发中，使用 SVG 图像已经成为一个非常常见的需求，特别是在 Vue 应用程序中。然而，引入 SVG 图像经常会遇到一些问题，例如图像大小问题、浏览器...
使用svg-sprite-loader 遇到的问题
热门推荐
知无涯
12-16 2万+
趁记忆还热乎 赶紧过来记录一下自己踩坑的记录 现有的项目是从另一个项目移植过来的, 并不是完全移植 为了减小项目的体积 前端组长将一些暂时用不到的组件 node包都剔除了 这也就引出了一下的问题 今天调试菜单图标的时候 发现项目中菜单的图片渲染用到的是icon-svg 这个组件 但怎么找都找不到这个组件 于是我才原有项目中找了一下 copy过来 但这样子仍然不行啊,sv...
使用Ant Design库练习React，报错bundle.js:10 Uncaught Error: Module build failed (from ./node_modules/
m0_57255222的博客
09-05 495
在index.js中导入要使用的组件：，由于第一步没有先手动import导入组件，而是先写了，所以VS Code自动生成了 import { App } from 'antd';与 import App from "./App.jsx" 相冲突，在新建的文件（App.jsx）中引入Ant Design库中的“按钮”代码后，
后台页面开发使用svg-sprite-loader以及本地Icon使用的一些问题
m0_55947892的博客
08-10 420
在这个报错中原因是没有找到svg-sprite-loader的包，检查后发现没有安装在根目录导致在package.json中没有显示，在cd到根目录之后在进行npm install。发现在使用了loader之后还是不能显示出正常的icon图标。检查代码发现原来是在JS文件中对于的代码写错。
运行vue项目时 浏览器空白报错： Error: Module build failed
兔子的博客
08-20 1495
运行vue项目时 浏览器空白报错： Error: Module build failed (from ./node_modules/_svg-sprite-loader@4.1.3@svg-sprite-loader/lib/loader.js 1、 rm node_modules 2、npm cache clear --force 3、npm install npm -g 4、npm install失败 改用 cnpm install 5、最后npm runstart 然后莫名也成功了。。。。 npm
Vue-cli3使用svg-sprite-loader的vue.config配置（node_modules里有个svg导致一直报错）
xlzy
12-26 6376
chainWebpack: config => { config.resolve.alias .set('@', resolve('src')); const svgRule = config.module.rule('svg'); // 找到svg-loader svgRule.uses.clear(); // 清除已有的loader, 如果不这样做会添加在此loader之后 svgRul...
解决uniapp项目中使用vant Weapp图标组件报错问题（Module build failed from ./node_modules/postcss-loader/src/index）
筱竹的博客
12-30 1万+
解决uniapp项目中使用vant 图标报错问题 在使用uniapp开发项目时，使用到了vant Weapp组件库，如下图所示： 但是当运行项目进行编译时或者发行进行项目打包时，报错如下： 以下是具体报错信息 15:25:26.122 Module build failed (from ./node_modules/postcss-loader/src/index.js): 15:25:26.128 SyntaxError 15:25:26.129 (36:193) Unclosed bracke
Module build failed (from ./node_modules/babel-loader/lib/index.js) 错误解决
mingY的博客
01-13 4917
运行项目时报错 Module build failed (from ./node_modules/babel-loader/lib/index.js) 解决方案： 控制台输入 npm install @babel/core @babel/preset-env 即可解决
小程序中出现Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
bjt1015999的博客
09-01 6851
小程序设置tabar时出现的报错信息
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js)： Modul
WBSRYA的博客
06-04 6974
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): 19:39:07.048 ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): 19:39:07.050 SassError: Undefined variable: "$uni-color-royal". 19:39:07.050
解决 “Module build failed (from ./node_modules/babel-loader/lib/index.js)“ 错误的方法
pleaseprintf的博客
07-25 1万+
在前端项目开发中，如果使用了 Babel 来转译 ES6+ 语法，有时会遇到错误信息 “Module build failed (from ./node_modules/babel-loader/lib/index.js)”。这个错误通常发生在使用 Webpack 或其他构建工具时。本文将详细介绍出现这个错误的原因，并提供解决方法，确保正确转译 ES6+ 语法，避免该错误的发生。
ExtractPluginMissingException: svg-sprite-loader exception. svg-sprite-loader in extract mode requires the corresponding plugin
最新发布
09-27
ExtractPluginMissingException是一个Webpack中常见的错误，它指出当svg-sprite-loader在提取模式（extract mode）下运行时，找不到相应的插件。svg-sprite-loader是用来从SVG文件中提取并打包精灵图（symbol sprites）到单独的CSS文件中，以便于CSS引用和优化。 在这种情况下，你需要安装并配置正确的插件，因为svg-sprite-loader依赖于其他特定的插件才能在extract模式下工作。这通常涉及到以下几个步骤： 1. 确保已经安装了`svgo-loader`和`svg-sprite-loader`，它们通常是svg-sprite-loader一起使用的。 2. 如果是使用`MiniCssExtractPlugin`等用于分离CSS的插件，确认是否已正确配置了`MiniCssExtractPlugin`及其配置选项。 3. 可能需要添加一个配置规则，例如`Rule`，将svg-sprite-loader链接到`MiniCssExtractPlugin`上，例如： ```javascript module.exports = { module: { rules: [ { test: /\.svg$/, use: [ 'file-loader', { loader: 'svg-sprite-loader', options: { name: '[name].[hash]', outputPath: 'sprites/', // 输出精灵图的位置 symbolId: 'icon-[name]', // 自定义每个图标ID的命名规则 extract: true, // 设置为true启用extract模式 plugins: ['SVGO'] // 如果需要，添加SVGO优化 } } ] } ] }, plugins: [ new MiniCssExtractPlugin({ filename: '[name].css' }) ] }; ``` 如果你仍然遇到问题，检查一下Webpack配置是否有误，或者查看相关的Webpack文档和项目依赖库的更新说明。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值