vue 引入stylus文件 报错问题

最新推荐文章于 2024-06-01 11:18:53 发布
最新推荐文章于 2024-06-01 11:18:53 发布
阅读量4.6k 收藏 1
点赞数 2
分类专栏： vue 文章标签： vue stylus
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/VEOL_/article/details/79753862
版权

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

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

            解压后长这样   

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

，

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

最低0.47元/天 解锁文章
VEOL_
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目中引入stylus文件
Joker 的博客
07-24 1548
使用vue-cli搭建好vue项目后，如果直接引入styl文件，会报错，需要安装stylus、stylus-loader依赖以及别名配置。 具体的步骤如下： 第一步： 安装stylus、stylus-loader依赖 cnpm install stylus-loader css-loader style-loader --save-dev 第二步： 别名配置 打开build目录...
vue3 动态加载组件以及解决vite import报警告 The above dynamic import cannot be analyzed by Vite 的问题
weixin_45368519的博客
08-24 4202
The above dynamic import cannot be analyzed by Vite. 在某些地方我们并不希望把组件都注册到router通过路由访问，或者多个小组件在一次引入，这个时候动态加载便有了用处vue3有了新的异步加载组件的方法 defineAsyncComponent。
stylus在vue中的安装及使用
DW14687的博客
04-28 3264
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 目录 前言 一、安装stylus 二、使用步骤 1.使用stylus 2.引用全局样式及配置 总结 前言 之前在项目中经常使用sass，偶然一次看到前辈在用stylus，然后我问他为啥要用这个呀，然后他给我说了几点优点： stylus可以自动将px转成rem，这就节省自己算rem的事件 stylus可以像sass一样使用变量、计算模式 stylus可以像sass一样嵌套样式 然后，我就被种草了。 恰巧.
vscode vue项目 @import 引入css、styl文件问题
最新发布
qq_43746935的博客
06-01 380
vue脚手架 @vue/cli 5.0.8。保存之后，再运行就可以解决了。node版本18.18.1。
Vue 中全局引入 stylus
前端技术
03-12 1565
一、安装 npm i style-resources-loader -D 二、vue.config.js 中配置 主要是方法importStylus，然后在module.exports.chainWebpack 中引入。 配置完成后，一定要重启项目才生效。 const webpack = require('webpack'); const path = require('path'); function resolve(dir) { return path.join(__di...
vue 样式中的stylus
小怪獸丶的糖的专栏
02-21 973
Stylus 是一款 CSS 的预处理器.点击查看详细文档 项目中如果多个地方都用的同一色值，并且有时候需要根据节日或者活动需要更改主题色即可用stylus来实现哦。 一、stylus的文件是.styl 二、style中的样式引入 @import '~@/assets/var.styl' 三、stylus语法 $bg=orange 使用示例 在assets文件夹中建立theme.styl文件，设置背景色为橘色 $bg=orange App.vue中进行使用,所有的p标签设置为橘色，如果项目中有几
详解vue中引入stylus及报错解决方法
08-29
总结，Vue 项目中引入 Stylus 可以提高 CSS 的编写效率和可维护性。正确安装和配置 stylus-loader、stylus，以及处理可能的报错，是成功集成 Stylus 的关键步骤。希望这些信息对你在 Vue 中使用 Stylus 提供了帮助，...
解决vue 项目引入字体图标报错、不显示等问题
10-18
总结，解决Vue项目中字体图标报错和不显示的问题，关键在于检查字体文件的引入路径、样式文件的引用以及预处理器的兼容性。通过上述方法，大多数情况下都能顺利解决这些问题，让图标在项目中正常显示。在实际开发...
Vue2.x中利用@font-size引入字体图标报错的解决方法
10-17
1. 引入字体样式文件：确保在每个使用字体图标的组件或全局的`app.vue`中引入字体样式文件。使用`@import`指令，例如：`@import './static/fonts/iconfont.css'`。如果是在全局引入，需确保从项目的根组件（如`app....
vue使用Sass时报错问题的解决方法
10-14
在Vue项目中使用Sass，可以直接在组件内引入`.scss`或`.sass`文件，或者在样式中直接写Sass代码。对于Vue 3.x，`@`符号用于导入资源是默认支持的，而在Vue 2.x中，可能需要在webpack配置中添加相应规则。 当遇到...
（二）Stylus简介及在vue中使用
m0_46571481的博客
05-08 1310
stylus stylus简介 Stylus是一个CSS预处理器。因为Stylus是来源于Node.js社区，与js关系密切，所以基于Vue.js的开发，我们选择使用Stylus。 Stylus可以做到css样式层级显示，更好的编译和维护。 配置Stylus环境 安装：命令行中打npm install stylus stylus-loader --save-dev 在.vue文件的style块中使...
在入口文件main.js引入styl报错，不断修改后运行正常了
vicky_yongqi的博客
10-10 652
在入口文件main.js里导入styl文件，直接运行发现系统报错了。 想了一下，发现并没有安装stylus和stylus-loader。把系统的所有终端调试运行都停止，直接在项目下安装： 1.npm install stylus --save 2.npm install stylus-loader --save 安装完成后打开package.json看到有这两个都显示当前版本（我感觉可能是直接在...
vue项目中使用stylus
IU
11-14 1366
初始化一个新项目 使用下面命令 npm install stylus -D 安装loader npm install stylus-loader css-loader style-loader --save-dev 这里有两个不会冲突的版本 npm install stylus@0.54.8 --save npm install stylus-loader@3.0.1 --save 不出意外的话应该可以了 在项目中直接使用就可以了 ...
stylus在vue中的使用
thatway的博客
01-15 4896
stylus是一个css预处理器，比较流行的css预处理器有sass、less、stylus，它们都一样，都是css的语法糖，可以使用变量，可以有简单的逻辑，使css的开发效率更高，更易维护。stylus来自node社区，它的语法兼容性强，个人觉得也更加简洁，选择在vue中使用。 安装stylus 以webpack模板为例，在webpack的loader配置中，已经做好了stylus的兼容，
在vue项目中使用stylus
热门推荐
shooke笔记
07-23 2万+
前提条件是已经有了vue项目，如果没有，请先建立，具体方法看这里https://cn.vuejs.org/v2/guide/installation.html安装stylus好了，建立好项目后我们来安装stylusnpm install stylus stylus-loader --save-dev这样就安装上了stylus。 接下来就可以使用了，使用方式分两种。在.vue文件的style块中使用
vue-cli项目安装使用stylus步骤
weixin_37595918的博客
04-24 7514
安装步骤基于使用vue-cli创建的项目。 1.创建完成一个初始项目后，通过 npm install stylus -D命令，在项目内安装stylus。（注意：命令结尾 -D 即是 --save-dev 的简写形式） 2.需要安装loader，通过 npm install stylus-loader css-loader style-loader --save-dev  命令。 3.找到 w
vue stylus格式化问题
weixin_41766191的博客
06-16 798
vue3 vite ts引入vue文件报错 ts
08-03
回答: 当在Vue3 Vite TypeScript项目中引入Vue文件时，可能会遇到TS(2307)的报错。这个报错只是TypeScript的报错，不会影响项目的运行。根据官方文档的说明[1]，可以解决这个...这样就可以解决引入Vue文件报错的问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值