位置: 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怎么样)

  • 微博粉丝增加方法有哪些(微博粉丝怎么增加)

    微博粉丝增加方法有哪些(微博粉丝怎么增加)

  • 论坛发帖推广七大技巧(论坛推广是免费的吗)

    论坛发帖推广七大技巧(论坛推广是免费的吗)

  • 钉钉怎么导出健康打卡数据(钉钉怎么导出健康打卡图片)

    钉钉怎么导出健康打卡数据(钉钉怎么导出健康打卡图片)

  • 抖音可以开小号吗(抖音可以开小号给自己刷礼物)

    抖音可以开小号吗(抖音可以开小号给自己刷礼物)

  • 苹果手机频繁自动重启怎么办(苹果手机频繁自动重启电量为1%)

    苹果手机频繁自动重启怎么办(苹果手机频繁自动重启电量为1%)

  • 短信可以发视频吗(短信可以发视频和照片吗?)

    短信可以发视频吗(短信可以发视频和照片吗?)

  • 小米手机怎么传数据到新手机(小米手机怎么传软件给别的手机)

    小米手机怎么传数据到新手机(小米手机怎么传软件给别的手机)

  • 苹果微信步数更新滞后(苹果微信步数更新)

    苹果微信步数更新滞后(苹果微信步数更新)

  • 华为屏幕朗读器怎么关闭(华为有没有朗读屏幕)

    华为屏幕朗读器怎么关闭(华为有没有朗读屏幕)

  • 主板主要由什么组成(主板的重要组成部分?)

    主板主要由什么组成(主板的重要组成部分?)

  • nova6se支持语音唤醒吗(nova6se有语音唤醒功能吗)

    nova6se支持语音唤醒吗(nova6se有语音唤醒功能吗)

  • 网线灯不亮什么原因(网线不亮灯就是没网吗)

    网线灯不亮什么原因(网线不亮灯就是没网吗)

  • 固态硬盘带缓存和不带有什么区别(笔记本固态硬盘带缓存)

    固态硬盘带缓存和不带有什么区别(笔记本固态硬盘带缓存)

  • 一个手机能下2个抖音吗(一个手机能下2个钉钉)

    一个手机能下2个抖音吗(一个手机能下2个钉钉)

  • 发朋友圈怎么发的(发朋友圈怎么发一句话)

    发朋友圈怎么发的(发朋友圈怎么发一句话)

  • 天猫旗舰店怎么投诉(天猫旗舰店怎么看是不是官方的)

    天猫旗舰店怎么投诉(天猫旗舰店怎么看是不是官方的)

  • word纸张16开是什么意思(纸张大小16开word)

    word纸张16开是什么意思(纸张大小16开word)

  • 微信微云文件在哪(微信云文件夹)

    微信微云文件在哪(微信云文件夹)

  • 苹果max有nfc吗(苹果有max手机吗?)

    苹果max有nfc吗(苹果有max手机吗?)

  • 微信朋友验证消息太长怎么看完(微信朋友验证消息怎么关闭)

    微信朋友验证消息太长怎么看完(微信朋友验证消息怎么关闭)

  • 苹果二合一转接头对手机有影响吗(苹果二合一转接头用不了)

    苹果二合一转接头对手机有影响吗(苹果二合一转接头用不了)

  • 苹果手机搜不到蓝牙设备解决方法(苹果手机搜不到airpods)

    苹果手机搜不到蓝牙设备解决方法(苹果手机搜不到airpods)

  • mac系统下怎么玩qq游戏?苹果电脑MAC玩QQ游戏方法介绍(mac系统怎么玩游戏)

    mac系统下怎么玩qq游戏?苹果电脑MAC玩QQ游戏方法介绍(mac系统怎么玩游戏)

  • 固态硬盘什么牌子好?2018一月固态硬盘推荐(固态硬盘什么牌子性价比高)

    固态硬盘什么牌子好?2018一月固态硬盘推荐(固态硬盘什么牌子性价比高)

  • 鲜艳多彩的爪哇树蛙,印度尼西亚 (© kuritafsheen/Getty Images)(鲜艳的多彩的英文)

    鲜艳多彩的爪哇树蛙,印度尼西亚 (© kuritafsheen/Getty Images)(鲜艳的多彩的英文)

  • 个人所得税人员信息采集验证不通过
  • 个体户要交什么税,怎样收
  • 国税如何零申报
  • 天然气管道抢维修工作总结
  • 计提租赁费用
  • 现在的统计证还用年检吗
  • 定额怎么确定
  • 个税申报人员信息采集表模板
  • 金税盘坏了更换需要几天
  • 企业计提的资产包括哪些
  • 债务重组损失是否属于营业外支出
  • 房地产开发商转型
  • 增值税逾期未申报网上可以吗
  • 股息收入所得税率
  • 汇票的票据行为有贴现吗
  • 流动负债中的短期借款
  • 招聘签合同
  • 小规模开票是含税的吗
  • 机动车辆发票如何认证?
  • 端午节给员工发福利说什么
  • 以前年度的其他应付款不用付怎么处理
  • 增值税专用发票和普通发票的区别
  • 稿酬计入工资所得吗
  • 分期服务费是啥
  • 延期报税申请怎么操作
  • 先发货后开票的销售业务流程
  • 股东分红个税怎么做账
  • 什么票据行为是合法的
  • php图形用户界面
  • 调整多计提企业利润
  • 工业企业成本核算的内容是
  • 补缴房产税和土地使用税会计分录
  • 餐费进什么科目
  • 投资担保公司的钱都去哪了
  • pytorch例程
  • 微信小程序解锁安全吗
  • php array_product
  • 包工的人工费可以算工程款
  • 年底应交增值税借方余额怎么处理
  • 企业利润表列报项目有哪些
  • 销售退回的会计科目
  • 发生售后维修领用材料分录
  • 二级栏目怎么做
  • 固定资产里含有增值税吗
  • 印花税的计税依据为各种应税凭证上所记载的计税金额
  • 开增值税专用发票的好处
  • 企业之间借贷是否合法有效
  • 母公司子公司下面的子公司怎么称呼
  • 个人取得劳务报酬个人所得税
  • 债券投资属于什么
  • 全资子公司变成孙公司是利好吗?
  • 应缴财政专户款年末有余额吗
  • 事业单位购入
  • 库存盘亏进项税怎么抵扣
  • 专项应付款支出的账务处理
  • 收到垫付款计入什么科目
  • sqlserver附加数据库时出错,请单击消息中的超链接
  • win7系统打开网页出现file not found
  • xp系统net framework 3.5
  • 新品分析表格
  • mac 邮箱
  • 直通车和百度竞价的区别
  • 装win7系统步骤
  • 怎么使用mac打电话
  • Linux系统配置网关
  • mac文件怎么用
  • win7系统咋样
  • glCopyBufferSubData
  • 3d网络游戏开发方法
  • 深入理解新发展理念,推进供给侧结构性改革心得体会
  • android动态添加fragment
  • 安卓Android下载
  • Django1.7+python 2.78+pycharm配置mysql数据库
  • bootstrapping怎么做
  • 删除的照片怎么还原
  • jquery自定义函数
  • jquery全局变量和局部变量
  • 电子票怎么申领到开票系统
  • 金税盘显示证书口令错误
  • t+怎么取消记账凭证
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设