vue 引入stylus文件 报错问题

最新推荐文章于 2024-04-04 17:48:11 发布
原创 最新推荐文章于 2024-04-04 17:48:11 发布 · 4.8k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #stylus

在Vue项目中引入icon font Styl文件时遇到错误。从icomoon下载SVG并转换为Stylus文件后，通过安装stylus和stylus-loader解决报错。错误提示指向路径问题，通过修改Styl文件中fonts的路径，尝试相对路径和绝对路径，最终成功解决。提醒遇到问题时先理解错误再针对性地寻找解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

用vue写程序想要引入icon font styl 文件时候，发现有错误，之前也学过同样的课程但没有出现这个错误，纠结了一个晚上后，第二天起来解决了问题，现在把过程记下，希望能够帮助到遇到同样问题的兄弟们。

首先我是在icon'moon 上下的svg 的css。以下传送门icomoon。强推一波这个网站，有好多svg图片，当然你也可以自己下载。粗略讲一下过程吧，懂的兄弟自动跳过这一part.......选择好你需要的图片后修改一下名字，点击右下角就可以打包下载。

            解压后长这样   

然后将style文件和fonts文件扔到你的项目中去，我放进去的时候改了名称和文件类型，所以是如下图的icon.styl,项目结构长这样：

，

到这里，先别着急引入，你需要先安装stylus和stylus-loade，先在paxkage.json中添加以下两项，然后使用npm install安装：

      

最低0.47元/天 解锁文章

200万优质内容无限畅学
Vue 引入 Stylus 及报错如何解决
YabClass的博客
10-03 659
在 Vue 项目中使用 Stylus 是一种常见的选择，因为它是一种功能强大且灵活的 CSS 预处理器。本文将详细介绍如何在 Vue 项目中引入 Stylus，并解决可能出现的报错。
vue-cli 引入 stylus 失败
aaa333qwe的博客
08-27 847
最近在使用vue-cli创建项目时发现无法在js文件中引入stylus文件,以前自己写的代码就没有问题,死活找不到原因,所以来问问各个大神. 操作步骤很简单: 先通过vue-cli的webpack模板建立文件夹: vue init webpack test-stylus 然后安装依赖 npm install 再然后 安装stylus stylus-loader style-lo
引入icon.styl字体文件无法解析报错
想搞全栈的前端
03-27 494
问题 在一个vue项目中需要引入icon.styl文件，然而报错如下 解决办法 将相对路径改为绝对路径，如下： 编译成功：
vue-cli构建的vue项目中引入stylus文件
weixin_30900589的博客
05-23 220
stylus是css预处理器。还有另外两种css预处理器语言详解：less、sass。 不懂的可以先看一下这篇文章：stylus预处理入门 在vue项目引入stylus css预处理器，可以让我们的css也可以更加灵活。可以看一下图中的stylus 文件，以styl结尾。 image.png 在写基于vue-cli的v...
webpack使用@import引入‘~xxx’stylus文件失败
梦殇的博客
04-01 1062
解决方案：详见webpack resolve.module章节 ~默认查找node_modules中包
详解vue中引入stylus及报错解决方法
08-29
总结，Vue 项目中引入 Stylus 可以提高 CSS 的编写效率和可维护性。正确安装和配置 stylus-loader、stylus，以及处理可能的报错，是成功集成 Stylus 的关键步骤。希望这些信息对你在 Vue 中使用 Stylus 提供了帮助，...
解决vue 项目引入字体图标报错、不显示等问题
10-18
总结，解决Vue项目中字体图标报错和不显示的问题，关键在于检查字体文件的引入路径、样式文件的引用以及预处理器的兼容性。通过上述方法，大多数情况下都能顺利解决这些问题，让图标在项目中正常显示。在实际开发...
vue-cli3构建的项目中vue组件中引入stylus文件时报错解决办法
dknl48740的博客
09-11 827
报错表现 解决办法： 引入文件时路径前增加~ 例子： @import'~common/stylus/mixin.styl'; vue.config.js配置文件中alias的配置 chainWebpack: config => { config.resolve.alias .set('vue$', 'vu...
vue cli搭建项目及文件引入
weixin_30824479的博客
04-17 150
cli搭建方法：需安装nodejs先 　　　1、npm install -g cnpm --registry=https://registry.npm.taobao.org //安装cnpm,用cnpm下载东西有时会快一些 　　　2、cnpm i -g vue-cli　　//安装 vue-cli，i:install 安装，-g：全局，哪儿都可以使用。 　　　3、vue init webpa...
在stylus格式的图标字体里url无法解析
Super灬LV
12-17 1947
问题最近在使用Vue开发时 使用了icmoon生成的字体图标，但是引入项目文件后一直报错。我尝试了使用stylus引用、CSS引用 都不可以。解决方式后来尝试把font资源放在static文件下，使用绝对路径访问就可以了。 之前卡在这个地方好久，因为我反复的检测测试过 本地项目的css loader 、stylus loader 等都是配置可以的，但是每次报的都是路径的访问问题，后来偶然看到了这
vue引入stylus文件报错，公共样式不显示问题
Naughty_Fairy的博客
11-13 1831
因为我修改了bulid文件下的webpack.base.conf.js文件里的alias，所以直接写common就代表src目录下的common， 注意引入的方式，以@开头，路径开头必须有~ @import '~/' 引入stylus文件会报下面的错误，最后修改了路径才解决了这个问题，路径从src开始写，默认已将@代表src  修改后，执行npm run dev没有报错 但...
Vue 中 安装 stylus
前端技术
01-21 1869
先说一下三个重要的地址： git：https://github.com/stylus/stylus stylus npm：https://www.npmjs.com/package/stylus stylus loader ：stylus-loader - npm 需要安装 stylus 和 stylus-loader，下面的命令直接全部安装 npm install stylus stylus-loader --save-dev 最后在文件 package.json devDepende...
Vue中使用stylus报错,有可能是版本问题
热爱可抵岁月漫长
11-26 1891
如果按照正常的流程下载并且配置了stylus,但是依旧报错,那么下面就是解决方法： 一、正常配置stylus流程 安装stylus、stylus-loader依赖(进入项目文件夹下) npm install stylus stylus-loader 1 package.json文件配置(手动添加依赖) "devDependencies": { ... "stylus": "^0.54.8", "stylus-loader": "^3.0.2", .
vue+uniapp+Stylus 实战小程序项目
小猿
01-30 820
vue+uniapp+Stylus 实战小程序项目
Vue中全局引入stylus文件不生效的问题(2)，web开发基础教程
最新发布
2401_84093019的博客
04-04 647
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。什么？你问面试题资料在哪里，这不是就在你眼前吗（滑稽。
vue项目中引入stylus文件
Joker 的博客
07-24 1658
使用vue-cli搭建好vue项目后，如果直接引入styl文件，会报错，需要安装stylus、stylus-loader依赖以及别名配置。 具体的步骤如下： 第一步： 安装stylus、stylus-loader依赖 cnpm install stylus-loader css-loader style-loader --save-dev 第二步： 别名配置 打开build目录...
stylus在vue中的使用
thatway的博客
01-15 5007
stylus是一个css预处理器，比较流行的css预处理器有sass、less、stylus，它们都一样，都是css的语法糖，可以使用变量，可以有简单的逻辑，使css的开发效率更高，更易维护。stylus来自node社区，它的语法兼容性强，个人觉得也更加简洁，选择在vue中使用。 安装stylus 以webpack模板为例，在webpack的loader配置中，已经做好了stylus的兼容，
vue使用stylus报错解决方法
u012317188的专栏
04-27 7487
在项目中的.vue文件中，如果想使用stylus即：如：<style lang="stylus" ><style> 常常会报错如下： 此时不仅仅需要npm install stylus-loader.还需要npm install stylus 。然后在packge.json文件中写入 此时，stylus文件就可用了，项目就可以正常运行了。
vue 中使用 stylus 报错的解决（ Error： Cannot find module 'when'）
前端少年
03-29 6190
2018.03.29 # 这次本来准备做一个音乐的 web App ,vue文件中准备使用 stylus 样式。以为一切会很顺利，可是遇到报错（心中一万个草泥马）；解决了这个问题之后，瞬间心情大悦，太开心了。 做一次记录，然后续的小伙伴，少采坑。 1、报错展示： 报错 Error： Cannot find module ‘when’） 2、错误...
stylus入门使用方法
热门推荐
求知若渴，虚心若愚，努力前行，未来可期。
05-22 1万+
stylus介绍是个什么鬼？对于开发来说，CSS的弱点在于静态化。我们需要一个真正能提高开发效率的工具，LESS， SASS都在这方面做了一些贡献。Stylus 是一个CSS的预处理框架，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，所以 Stylus 是一种新型语言，可以创建健壮的、动态的、富有表现力的CSS。比较年轻，其本质上做的事情与 SASS/LESS
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值