解决vue项目中style加入lang=“stylus“报错问题

最新推荐文章于 2023-03-10 20:15:06 发布
最新推荐文章于 2023-03-10 20:15:06 发布
阅读量2.2k 收藏 5
点赞数 8
分类专栏： vue 文章标签： vue stylesheet css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_57484291/article/details/118021876
版权
本文介绍了一个在Vue项目中使用Stylus预处理器遇到的问题及解决方案。作者发现使用最新版本的Stylus和stylus-loader会导致错误发生，通过降级stylus-loader版本至3.0.2成功解决了该问题。

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

创建的vue项目引入css预处理器stylus，安装的stylus和stylus-loader是最新的版本，结果在style标签加入stylus就报错，如图

写法是这样的<style lang="stylus" scoped></style>,去掉lang="stylus"就又可以正常运行了。

最开始安装的stylus和stylus-loader版本

结果降低一个版本就可以正常运行了

解决方法是降低stylus-loade版本，先卸载原先安装的版本npm uninstall stylus-loader ，再重装指定版本 npm install stylus-loader@3.0.2

webstrom编译.vue遇到的报错问题
qq_42624874的博客
08-17 2072
1.webstorm中.vue文件中写stylus，总是出现警告和错误，但不影响编译 解决方案1: 装个vue插件，idea 里面插件名：vue-for-idea 解决方案2: 新版本的webstorm（2012以上）可用下面的方式解决： &amp;amp;lt;style lang=&amp;quot;stylus&amp;quot; rel=&amp;quot;stylesheet/stylus&amp;quot;&amp;amp;gt;
详解vue中引入stylus及报错解决方法
08-29
主要介绍了详解vue中引入stylus及报错解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
＜style lang=‘stylus‘ scoped＞＜/style＞ 还有Vscode配置vue.json自定义模板
weixin_45026839的博客
08-04 1267
一个现在还没有接触的东西 <style lang='stylus' scoped></style> 现在只知道 lang: 普通的style标签只支持普通的样式，如果想启用scss或者less，需要为style元素设置lang属性 还有scoped属性：scoped是指定样式的局部作用域，样式只在当前.vue页面使用，不在其他页面使用 至于stylus：富于表现力、动态的、健壮的 CSSstylus是一个强大的css预编译语言,stylus支持省略花括号，支持省略分号，代码整洁，支.
style lang=stylus scoped_趁着夏天还在，继续安排黄梦莹style，格子半裙，最有看点...
weixin_39884832的博客
11-02 108
趁着夏天还在，秋季刚来，我们的穿搭依旧可以保持夏季和秋季混搭的风格，格子类的半裙+白色T恤，虽说简约却很有格调，正是因为格子类的高腰半裙搭配方式，加上不规则的半裙风格一字肩也可以很有气场的去搭配层次，高高的马尾辫在搭配当中，就可以保持女生本有俏皮，还有一定的时尚感，加上马尾辫当中的小卷发style，也呈现出了很高雅的调调好看的穿搭从不规则的设计开始入手，白色系可以加字母，也可以加上图画类的设计，都...
.vue文件内＜style＞样式报错
qq_73522789的博客
03-10 691
-只应用于当前页面-->修改为以下格式可解决问题。
sublime使用日记：vue中的style部分无法正常高亮
Cynthia_Yue27的博客
08-27 6105
使用sublime好长时间了，但从接触vue后，出现了一个问题一直困扰着我，找了好多办法仍然无解，我不得不放弃它。最近在家养病，闲来无事，终于解决了这个bug。 sublime安装插件的步骤在这就不赘述了，有太多大神已经写的很详细了，下面直接上问题图： 如上图，我安装了vue的高亮插件Vue Syntax Highlight，模板和js部分的高亮没有问题，但是从script标签开始，高亮部...
Vue中”This dependency was not found”问题的解决方法
12-10
在开发过程中，理解Webpack的模块解析机制和配置是非常重要的，它可以帮助我们更好地理解和解决问题，提高开发效率。对于初学者，参考官方文档和社区资源也是获取帮助的有效途径。希望这篇文章能对你有所帮助，如果...
vue使用Sass时报错问题的解决方法
10-14
在Vue项目中，Sass是一种...同时，查阅报错信息，针对性地解决问题。希望本文提供的解决方案能对你在使用Vue和Sass时遇到的问题有所帮助，如果需要了解更多相关内容，可以搜索相关的技术文章或继续浏览其他相关教程。
Vue项目，在style中加入lang=“stylus“报错，解决
qq_44459937的博客
10-24 3845
今天刚创建的vue项目，stylus和stylus-loader安装的也是最新版本。结果一运行就报这个错
vue中 stylus 的使用
weixin_46211267的博客
11-30 1604
stylus官网地址 两步骤 一、安装 npm i stylus stylus-loader --save 二、 修改组件中的style 的lang <style lang="stylus"></style> 这样就可以直接用了 用法： 可没括号、分号、逗号、冒号 变量 $bgColor=skyblue font-size=14px ...
组件中style标签lang属性和scoped属性的介绍
ADLF
01-06 9582
scoped只让样式渲染本组件，不会全局渲染
将lang=“stylus“转换为lang=“scss“的方法
qq_51196135的博客
01-03 1382
将 stylus 转换成 scss
vue中私有样式(scoped)中修改其他组件的样式
weixin_30448603的博客
07-09 368
1、使用">>>"符号更改其他组件的样式 　　例如 　　　　<style lang="stylus" scoped> 　　　　　　.a >>> .b 　　　　　　　　/*样式*/ 　　　 </style> 2、当lang = less or sass 时 解析不了">>>"符号，则使用 /deep/ ...
Stylus - Scoped & Scoped 穿透
陆克和他的那些代码
02-11 2566
什么是 Scoped？ 在Vue文件中的style标签上有一个特殊的属性，scoped。当一个style标签拥有scoped属性时候，它的css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。如果一个项目的所有style标签都加上了scoped属性，相当于实现了样式的模块化。 Scoped 实现原理 Vue中的scoped属性的效果主要是通过PostCss实现的。以下是转译前...
【stylus】css预处理器stylus的安装以及简单用法
Owen的博客
10-27 1773
前言：stylus和sass、less同为css预处理器。css预处理器是：你用“我的”语法来写，更简单，更强大，最后我帮你编译成css文件。说实话，之前我没用过css预处理器，stylus是接触的第一个，确实比写css要简洁，而且可以用变量，函数…（其他方面等我用到再来更新） 如何在项目中应用？ 1、安装 $ npm install stylus -g 2、设置 lang='stylus' <style scoped lang="stylus"> </style&..
（二）Stylus简介及在vue中使用
m0_46571481的博客
05-08 1420
stylus stylus简介 Stylus是一个CSS预处理器。因为Stylus是来源于Node.js社区，与js关系密切，所以基于Vue.js的开发，我们选择使用Stylus。 Stylus可以做到css样式层级显示，更好的编译和维护。 配置Stylus环境 安装：命令行中打npm install stylus stylus-loader --save-dev 在.vue文件的style块中使...
Style笔记(css, stylus,less)
Ndbsa的博客
11-24 726
css，stylus，less各种语法记录
在Vue项目中如何正确引入并使用Stylus预处理器进行样式编写？
最新发布
11-05
在Vue项目中引入并使用Stylus预处理器可以极大地提升样式的编写效率和可维护性。首先，确保你的项目已安装Stylus相关的依赖包。通常，我们可以通过npm或yarn来安装这些依赖。接下来，你需要在Vue组件中引入Stylus文件，并在编译时正确配置Stylus的加载器。 参考资源链接：[详解vue中引入stylus及报错解决方法](https://wenku.youkuaiyun.com/doc/6412b786be7fbd1778d4a9d9?spm=1055.2569.3001.10343) 具体步骤如下： 1. 安装Stylus和 stylus-loader： 使用npm或yarn安装，命令如下： ``` npm install stylus stylus-loader --save-dev ``` 或 ``` yarn add stylus stylus-loader --dev ``` 2. 在webpack配置文件中添加stlyus-loader： 打开项目中的webpack配置文件（通常是webpack.config.js），在module.rules数组中添加以下规则，以支持Stylus文件的加载： ```javascript { test: /\.styl$/, use: [ 'style-loader', 'css-loader', 'stylus-loader' ] } ``` 这里的配置告诉webpack如何处理以`.styl`结尾的文件。`style-loader`将编译后的样式注入到DOM中，`css-loader`处理CSS文件，而`stylus-loader`则负责编译Stylus文件。 3. 在Vue组件中引入并使用Stylus文件： 在你的Vue组件的`<style>`标签中指定语言为Stylus，并开始编写样式。例如： ```html <style lang= 参考资源链接：[详解vue中引入stylus及报错解决方法](https://wenku.youkuaiyun.com/doc/6412b786be7fbd1778d4a9d9?spm=1055.2569.3001.10343)
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值