位置: IT常识 - 正文

vue2 sass 安装及使用(vuescan怎么安装)

编辑:rootadmin
vue2 sass 安装及使用

推荐整理分享vue2 sass 安装及使用(vuescan怎么安装),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue less安装,vue中sass样式不生效,vue配置sass,vue-cli sass,vue安装sass命令,vue安装node-sass,vue安装node-sass,vue安装sass命令,内容如对您有帮助,希望把文章链接给更多的朋友!

最近在看前端。其一因为手里有个项目uniapp的里面使用了sass,但是有sass报错,其次想自己写个vue2后台,感觉sass写起来科学点。但是……版本这个东西……太费劲了……

vue2-cli集成webpack,使用vue create 项目名后再安装sass相当于在webpack的基础上安装sass。需要安装sass依赖包 sass-loader,以及它的依赖包sass-loader。看很多教程说在build/webpack.config.js中再改东西,但是我用vue2创建的项目没找到这个文件先忽略。

安装环境:

win10

webpack 5.75 //系统全局

vue2

@vue/cli 4.5.14//重点

安装步骤:

vue create testsass

cd testsass

npm i sass-loader

npm i node-sassnpm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fsnpm WARN deprecated @npmcli/move-file@2.0.1: This functionality has been moved to @npmcli/fsadded 140 packages in 11s

贴出来就想证明下,这步没报错……

npm i node-sass

报错:

npm i sass-loadernpm ERR! code ERESOLVEnpm ERR! ERESOLVE could not resolvenpm ERR! npm ERR! While resolving: testsass@0.1.0npm ERR! Found: webpack@4.46.0npm ERR! node_modules/webpacknpm ERR! peer webpack@"^4.0.0" from @intervolga/optimize-cssnano-plugin@1.0.6 npm ERR! node_modules/@intervolga/optimize-cssnano-pluginnpm ERR! @intervolga/optimize-cssnano-plugin@"^1.0.5" from @vue/cli-service@4.5.19npm ERR! node_modules/@vue/cli-servicenpm ERR! peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-babel@4.5.19npm ERR! node_modules/@vue/cli-plugin-babelnpm ERR! dev @vue/cli-plugin-babel@"~4.5.14" from the root project npm ERR! 4 more (@vue/cli-plugin-eslint, @vue/cli-plugin-router, ...) npm ERR! peer webpack@"^4.0.0 || ^5.0.0" from @soda/friendly-errors-webpack-plugin@1.8.1npm ERR! node_modules/@soda/friendly-errors-webpack-pluginnpm ERR! @soda/friendly-errors-webpack-plugin@"^1.7.1" from @vue/cli-service@4.5.19npm ERR! node_modules/@vue/cli-servicenpm ERR! peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-babel@4.5.19npm ERR! node_modules/@vue/cli-plugin-babelnpm ERR! dev @vue/cli-plugin-babel@"~4.5.14" from the root project npm ERR! 4 more (@vue/cli-plugin-eslint, @vue/cli-plugin-router, ...) npm ERR! 19 more (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, ...)npm ERR!npm ERR! Could not resolve dependency:npm ERR! sass-loader@"*" from the root projectnpm ERR!npm ERR! Conflicting peer dependency: webpack@5.75.0npm ERR! node_modules/webpacknpm ERR! peer webpack@"^5.0.0" from sass-loader@13.2.0npm ERR! node_modules/sass-loadernpm ERR! sass-loader@"*" from the root projectnpm ERR!npm ERR! Fix the upstream dependency conflict, or retrynpm ERR! this command with --force, or --legacy-peer-depsnpm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR!npm ERR! See C:\Users\ZHAA\AppData\Local\npm-cache\eresolve-report.txt for a full report.npm ERR! A complete log of this run can be found in:npm ERR! C:\Users\ZHAA\AppData\Local\npm-cache\_logs\2022-11-19T07_58_28_099Z-debug.log

根据内容大概意思,找到webpack环境4.46.0需要5版本及以上,就是安装的版本高了。

找到问题查版本……

npm 13:sass-loader - npm

vue2 sass 安装及使用(vuescan怎么安装)

npm 13 git:https://github.com/webpack-contrib/sass-loader/blob/master/package.json

确实如报错所说……

然后用上述方法看了 从7版本到13版本的,都是5.0以上,但是通过实践7版本是可以按的。

npm i sass-loader@7added 5 packages in 3snpm uninstall sass-loaderremoved 5 packages in 3sD:\workspace\html\vue\testsass>npm i sass-loader@8 npm ERR! code ERESOLVEnpm ERR! ERESOLVE could not resolvenpm ERR!npm ERR! While resolving: sass-loader@8.0.2npm ERR! Found: node-sass@8.0.0npm ERR! node_modules/node-sassnpm ERR! node-sass@"^8.0.0" from the root projectnpm ERR!npm ERR! Could not resolve dependency:npm ERR! peerOptional node-sass@"^4.0.0" from sass-loader@8.0.2npm ERR! node_modules/sass-loadernpm ERR! sass-loader@"8" from the root projectnpm ERR!npm ERR! Conflicting peer dependency: node-sass@4.14.1npm ERR! node_modules/node-sassnpm ERR! peerOptional node-sass@"^4.0.0" from sass-loader@8.0.2npm ERR! node_modules/sass-loadernpm ERR! sass-loader@"8" from the root projectnpm ERR!npm ERR! Fix the upstream dependency conflict, or retrynpm ERR! this command with --force, or --legacy-peer-depsnpm ERR! to accept an incorrect (and potentially broken) dependency resolution.npm ERR!npm ERR! See C:\Users\ZHAA\AppData\Local\npm-cache\eresolve-report.txt for a full report.npm ERR! A complete log of this run can be found in:npm ERR! C:\Users\ZHAA\AppData\Local\npm-cache\_logs\2022-11-19T08_31_26_140Z-debug.log

事实证明,就是7好使……但是后面还是有问题……

改testsass\src\components\HelloWord.vue:

<style lang="sass"> body{ padding:10px; }</style

  报错:Syntax Error: Error: Node Sass version 8.0.0 is incompatible with ^4.0.0.

   原因是node-sass版本过高。

node-sass 换成6的:

npm uninstall node-sassnpm WARN cleanup Failed to remove some directories [npm WARN cleanup [npm WARN cleanup 'D:\\workspace\\html\\vue\\testsass\\node_modules\\.node-sass-3UXcrxZ0',npm WARN cleanup [Error: EPERM: operation not permitted, unlink 'D:\workspace\html\vue\testsass\node_modules\.node-sass-3UXcrxZ0\vendor\win32-x64-93\binding.node'] {npm WARN cleanup errno: -4048,npm WARN cleanup code: 'EPERM',npm WARN cleanup syscall: 'unlink',npm WARN cleanup path: 'D:\\workspace\\html\\vue\\testsass\\node_modules\\.node-sass-3UXcrxZ0\\vendor\\win32-x64-93\\binding.node'npm WARN cleanup }npm WARN cleanup ]npm WARN cleanup ]removed 140 packages in 58snpm install node-sass@6 added 93 packages in 1m

这些操作之后按理说应该已经没问题了,至少报错应该不一样了吧,但是并没有,还得把pageage-lock.json再删一遍,再编译一遍报错就改了……mmp

Syntax Error: Error: Node Sass version 6.0.1 is incompatible with ^4.0.0.

我就好奇这4.0.0指的是啥……

好吧vue-cli内置的weback4.0版本,接着改……

省去查版本的时间:sass-loader、node-sass安装失败问题解决_前端学习007的博客-CSDN博客

根据这篇文章用4.13的,然后我按4版本时安装时报错。

改变修改思路,升级vue-cli版本,理论上配置根据当前的package.json,cli只是构建目录,之前的项目应该不会受影响。

既然是vue-cli内置的webpack版本问题,一个升级vue-cli,一个直接用webpack。

目前cli升级完了,明天继续折腾。

这前端……好麻烦,比我折腾linux还麻烦……

这篇文章,总结下来就一个观点,vue-cli 4版本的用sass不方便。

本文链接地址:https://www.jiuchutong.com/zhishi/296151.html 转载请保留说明!

上一篇:asradm命令 自动服务请求注册实用程序(asreg命令什么意思)

下一篇:怎么让 echarts 图表动起来?定时器解决它 —— 大屏展示案例(动态仪表盘、动态柱状图)(echarts怎么样)

  • iqoo8怎么设置锁屏密码(iqoo8怎么设置锁屏视频)

    iqoo8怎么设置锁屏密码(iqoo8怎么设置锁屏视频)

  • 苹果13耳机插哪里(苹果13耳机插哪个孔)

    苹果13耳机插哪里(苹果13耳机插哪个孔)

  • 群里拍一拍别人能看见吗(群里拍一拍别人有备注但显示昵称是怎么回事)

    群里拍一拍别人能看见吗(群里拍一拍别人有备注但显示昵称是怎么回事)

  • 华为nova5i怎么分屏(华为nova5i怎么分两个屏幕应用)

    华为nova5i怎么分屏(华为nova5i怎么分两个屏幕应用)

  • 小米mix3怎么解除小米耳机模式(小米mix3怎么解除软件管控)

    小米mix3怎么解除小米耳机模式(小米mix3怎么解除软件管控)

  • 如何彻底卸载小米视频(如何彻底卸载小鱼便签)

    如何彻底卸载小米视频(如何彻底卸载小鱼便签)

  • QQ怎么用电脑录直播课(电脑qq怎么录制视频教程)

    QQ怎么用电脑录直播课(电脑qq怎么录制视频教程)

  • 淘宝直播电脑版叫什么(淘宝直播电脑版手机投屏)

    淘宝直播电脑版叫什么(淘宝直播电脑版手机投屏)

  • 幻灯片母版在哪(office主题幻灯片母版在哪)

    幻灯片母版在哪(office主题幻灯片母版在哪)

  • 怎么让蓝牙耳机不闪光(怎么让蓝牙耳机声音变大)

    怎么让蓝牙耳机不闪光(怎么让蓝牙耳机声音变大)

  • 手机半年没充电会坏吗(手机半年没充电了还能用吗)

    手机半年没充电会坏吗(手机半年没充电了还能用吗)

  • 两寸蓝底电子照片手机怎么弄(两寸蓝底电子照片手机怎么弄免费)

    两寸蓝底电子照片手机怎么弄(两寸蓝底电子照片手机怎么弄免费)

  • 移动信号hd什么意思(移动信号上hd什么意思)

    移动信号hd什么意思(移动信号上hd什么意思)

  • 华为来电转移在哪设置(华为来电转移在哪里关闭)

    华为来电转移在哪设置(华为来电转移在哪里关闭)

  • qq群文件容量上限(qq群群文件容量)

    qq群文件容量上限(qq群群文件容量)

  • 二代身份证芯片位置(二代身份证芯片日本造)

    二代身份证芯片位置(二代身份证芯片日本造)

  • 淘宝退货填错单号怎么修改(淘宝退货填错单号卖家拒绝退款怎么办)

    淘宝退货填错单号怎么修改(淘宝退货填错单号卖家拒绝退款怎么办)

  • 手滑关注了又取关会被发现吗(手滑关注了又取关)

    手滑关注了又取关会被发现吗(手滑关注了又取关)

  • iphone7plus耳机孔在哪里(iphone7plus耳机孔插上耳机没有用)

    iphone7plus耳机孔在哪里(iphone7plus耳机孔插上耳机没有用)

  • 苹果换屏还有面容吗(苹果换屏面容还能用吗)

    苹果换屏还有面容吗(苹果换屏面容还能用吗)

  • 微信添加好友历史记录(微信添加好友历史记录怎么查看)

    微信添加好友历史记录(微信添加好友历史记录怎么查看)

  • 手机夜光屏怎么设置(手机夜光屏没什么用啊)

    手机夜光屏怎么设置(手机夜光屏没什么用啊)

  • 快手为什么发不了朋友圈(快手为什么发不出去视频了)

    快手为什么发不了朋友圈(快手为什么发不出去视频了)

  • 荣耀20pro能用40w快充吗(荣耀20pro能用鸿蒙系统吗)

    荣耀20pro能用40w快充吗(荣耀20pro能用鸿蒙系统吗)

  • 八代雅阁蓝牙怎么连接(八代雅阁蓝牙怎么放歌)

    八代雅阁蓝牙怎么连接(八代雅阁蓝牙怎么放歌)

  • steam必须安装在c盘吗(steam必须安装在英文目录)

    steam必须安装在c盘吗(steam必须安装在英文目录)

  • 文化传媒公司的税种及税率
  • 哪些资产损失向银行贷款
  • 中级会计实务主观题
  • 天然气管道维修收费标准
  • 销项负数的分录怎么做
  • 税务局个人开发票流程
  • 小微企业附加税减半征收
  • 资助的开发经费可税前扣除吗
  • 汽车的购置税可以不交吗
  • 电汇凭证如何使用
  • 出口货款收不回来怎么办
  • 低值易耗品定义出处
  • 固定资产报废的账务处理例题
  • 为什么算除税价不算税金
  • 增值税专用发票验票
  • 误餐补助需要发票做账吗
  • 关于商业健康保险产品的规范和条件
  • 汇算清缴差旅费扣除标准
  • 混凝土的增值税率是多少
  • 长投成本法分红分录
  • 坏账准备本期期末应有金额
  • 小规模纳税人可以退税吗?
  • 专用发票右上角的数字表示什么
  • 事业单位洗车费如何入账
  • 物业公司收取电费加价依据
  • 公司有残疾人员怎么办
  • 财产租赁所得个人所得税怎么申报
  • macOSCatalina10.15.5正式版值得升级吗 macOSCatalina10.15.5更新了什么
  • win7安装包下载
  • 无形资产清理账务怎么做
  • 购买性支出和转移性支出的区别可以归纳为()
  • mysql事务执行流程
  • 库存商品交增值税吗
  • mysql.php
  • php 动态调用类方法
  • macos安装多版macos并存
  • 我国的增值税是价外税消费税是价内税
  • php抽象类可以多继承吗
  • 物流公司挂靠会计处理
  • yolo v5 github
  • 一分钟玩转钉钉文档是什么东西
  • 免征和抵扣税额的区别
  • 规划设计费会计分录
  • 折旧费和折旧额的区别
  • 本月盈利本年亏损要做分录吗
  • 收到天使投资账务处理
  • sql数据库降低版本
  • ibm.data.db2
  • 独资企业的税收政策
  • 增值税发票红冲的相关规定
  • 应收账款余额在借方还是贷方
  • 库存股属于什么类科目,借贷方向
  • 撤回或减少投资所得税处理
  • 可以报销的票据种类
  • 固定资产加速折旧最新政策2022
  • 可供分配的利润是什么意思
  • 工伤七至十级有伤残津贴吗
  • 预收物业费预收什么意思
  • 公司买空调算什么费用
  • 账面价值,账面净值,账面余额三者的区别存货
  • sql 普通行列转换
  • win10小娜如何使用
  • linux系统bug
  • winxp win10哪个快
  • win10怎么升级到2020
  • opengles 旋转 平移 缩放
  • 简单理解贴现
  • 使用权资产
  • 优质推荐
  • tomcat怎么启动
  • Linux中scp命令获取远程文件的方法
  • cocos creator读取json
  • 用批处理结束进程
  • 深入理解javascript特性
  • 国家税务总局张局长
  • 广西地税局局长
  • 1万4千块钱交多少个人所得税
  • 个人工资扣税标准计算
  • 新税法折旧年限怎么算
  • 每个省几个市
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设