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

最新推荐文章于 2024-05-09 08:00:00 发布
转载 最新推荐文章于 2024-05-09 08:00:00 发布 · 2k 阅读 · 1 ·
CC 4.0 BY-SA版权
原文链接：https://blog.youkuaiyun.com/m0_57484291/article/details/118021876
文章标签：

#vue.js #stylus #前端

本文介绍了一种在Vue项目中遇到的关于Stylus CSS预处理器的版本兼容性问题。当使用最新版本的Stylus和Stylus-Loader时，在项目中加入Stylus样式会导致错误发生。通过降低Stylus-Loader版本至3.0.2成功解决了该问题。

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

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

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

在这里插入图片描述

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

在这里插入图片描述

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

fdt丶
关注
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 3867
今天刚创建的vue项目，stylus和stylus-loader安装的也是最新版本。结果一运行就报这个错
＜style lang=‘stylus‘ scoped＞＜/style＞ 还有Vscode配置vue.json自定义模板
weixin_45026839的博客
08-04 1302
一个现在还没有接触的东西 <style lang='stylus' scoped></style> 现在只知道 lang: 普通的style标签只支持普通的样式，如果想启用scss或者less，需要为style元素设置lang属性 还有scoped属性：scoped是指定样式的局部作用域，样式只在当前.vue页面使用，不在其他页面使用 至于stylus：富于表现力、动态的、健壮的 CSSstylus是一个强大的css预编译语言,stylus支持省略花括号，支持省略分号，代码整洁，支.
vue中引用 lang=‘stylus‘ 编译报错问题解决
weixin_44996006的博客
06-06 816
| | | |–|--| | | 报错原因：由于stylus-loader版本过高，更改为低版本即可，需要执行以下命令操作： npm uninstall stylus stylus-loader //删除之前的loader npm install stylus stylus-loader@3.0.1 --save-dev //再次安装 重新安装低版本后，再次重启项目发现编译成功。 ...
vue使用stylus报错解决方法
u012317188的专栏
04-27 7507
在项目中的.vue文件中，如果想使用stylus即：如：<style lang="stylus" ><style> 常常会报错如下： 此时不仅仅需要npm install stylus-loader.还需要npm install stylus 。然后在packge.json文件中写入 此时，stylus文件就可用了，项目就可以正常运行了。
将lang=“stylus“转换为lang=“scss“的方法
qq_51196135的博客
01-03 1422
将 stylus 转换成 scss
详解vue中引入stylus及报错解决方法
08-29
在 Vue 项目中，有时我们需要使用预处理器来增强 CSS 的功能，比如 Stylus。Stylus 是一个强大的、动态的样式语言，提供了变量、嵌套规则、函数等特性，使得 CSS 编写更加简洁和模块化。 **安装 Stylus 和 stylus-...
ERROR Failed to compile with 1 error 8:13:43 PM error in ./src/views/home/index.vue?vue&type=style&index=0&id=5954443c&lang=stylus& Syntax Error: Error: Cannot find module 'lodash.clonedeep' @ ./node_modules/vue-style-loader??ref--11-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--11-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--11-oneOf-1-2!./node_modules/stylus-loader??ref--11-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/home/index.vue?vue&type=style&index=0&id=5954443c&lang=stylus& 4:14-470 15:3-20:5 16:22-478 @ ./src/views/home/index.vue?vue&type=style&index=0&id=5954443c&lang=stylus& @ ./src/views/home/index.vue @ ./src/router/index.js @ ./src/main.js @ multi (webpack)-dev-server/client?http://192.168.43.214:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
最新发布
03-12
好的，我现在需要帮助用户解决Vue项目中出现的“Cannot find module 'lodash.clonedeep'”编译错误。首先，我得回忆一下用户提供的引用内容，看看有没有相关的线索。 根据用户提供的引用信息，比如引用[3]和[4]提到...
Stylus
ddtbem4621的博客
05-07 455
Stylus是一个CSS预处理器。 那么在SaaS，Less和Stylus中，为什么选择后者呢？ 因为Stylus是来源于Node.js社区，与js关系密切，所以基于Vue.js的开发，我们选择使Stylus。1.配置Stylus环境 npm install stylus --save-dev npm install stylus-loader --save-dev npm...
vscode中自动格式化stylus设置
byking818的博客
03-15 195
问题描述使用vscode中自动格式化快捷SHIFT+ALT+F格式化stylus后的代码经常会添加大括号和分号，导致样式很不习惯。 解决方案：先在拓展商店里下载language-stylus 然后在set.json中设置如下代码(新版vscode找不到setting.json 请移步https://www.jianshu.com/p/5c01a90aed54)："stylusSup...
vue-cli项目使用stylus
界之边缘的轮回
03-23 546
vue-cli使用stylus 项目下 cnpm install stylus stylus-loader --save-dev style标签内添加lang=”stylus” &lt;style lang="stylus" scoped &gt; ... &lt;style&gt; 可以到这学习stylus——stylus中文文档-张鑫旭...
（二）Stylus简介及在vue中使用
m0_46571481的博客
05-08 1466
stylus stylus简介 Stylus是一个CSS预处理器。因为Stylus是来源于Node.js社区，与js关系密切，所以基于Vue.js的开发，我们选择使用Stylus。 Stylus可以做到css样式层级显示，更好的编译和维护。 配置Stylus环境 安装：命令行中打npm install stylus stylus-loader --save-dev 在.vue文件的style块中使...
vue项目笔记（6）-使用stylus
从零出发
08-09 1592
vue中使用stylus 1、stylus的安装，具体方法：运行以下命令 npm install stylus --save npm install stylus-loader --save 2、组件中使用的时候，需要声lang="stylus" &lt;style lang="stylus" scoped&gt; &lt;/style&gt; 3、stylus中使用变量（以背景颜...
【Stylus详解与引入】
m0_74187147的博客
05-09 1842
Stylus是一个CSS预处理器，它为CSS带来了许多高级功能和更简洁的语法。Stylus的语法类似于Sass和Less，但更加简洁和直观。它允许你使用变量、嵌套规则、混合（mixins）、函数等特性来编写更加模块化和可维护的CSS代码。除了内置的函数外，Stylus还支持自定义函数。这允许你编写可重用的逻辑来处理样式值。rem(n)bodyh1在上面的例子中，我们定义了一个名为rem的自定义函数，用于将像素值转换为rem单位。
【stylus】css预处理器stylus的安装以及简单用法
Owen的博客
10-27 1815
前言：stylus和sass、less同为css预处理器。css预处理器是：你用“我的”语法来写，更简单，更强大，最后我帮你编译成css文件。说实话，之前我没用过css预处理器，stylus是接触的第一个，确实比写css要简洁，而且可以用变量，函数…（其他方面等我用到再来更新） 如何在项目中应用？ 1、安装 $ npm install stylus -g 2、设置 lang='stylus' <style scoped lang="stylus"> </style&..
vue中 stylus 的使用
weixin_46211267的博客
11-30 1646
stylus官网地址 两步骤 一、安装 npm i stylus stylus-loader --save 二、 修改组件中的style 的lang <style lang="stylus"></style> 这样就可以直接用了 用法： 可没括号、分号、逗号、冒号 变量 $bgColor=skyblue font-size=14px ...
Stylus的引入
weixin_61468920的博客
05-06 777
Stylus是一个CSS预处理器，它允许开发者使用更高级的语法来编写CSS，并提供了一些额外的功能来简化和增强CSS的编写过程。然后，你可以在该标签内编写Stylus代码，或者直接引入外部的Stylus文件。使用npm安装Stylus。首先，确保你的Vue项目已经安装了Node.js和npm。在Vue组件中引入Stylus文件。你可以在Vue组件的。这将把Stylus及其相关依赖项添加到你的项目中。或者，你可以将Stylus代码写入外部文件（如。），然后在Vue组件中通过。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值