针对vue项目中使用scss,启动时报错的解决方案

     在vue项目中的sass-loader主要是用来将sass/scss文件解析成能够被浏览器识别的css文件,而node-sass主要就是为sass-loader提供支持的一个模块,简单来说node-sass可以使sass-loader正常运行,而sass-loader在运行的时候可以将sass/scss文件解析成css文件

运行带有scss的vue项目时遇到的问题:

     1,将使用scss文件的vue项目启动后,当node-sass和node版本不匹配的时候,就会报错如下:

 这里就是说通过npm工具启动的时候找不到node-sass模块

     解决方案: npm  uninstall  node-sass           //卸载

                    npm   install node-sass@6.0.1        //我的node版本是16.18.0,和这个node-sass的6.0.1正好是相匹配的

   2,当匹配后再次运行,可能会报错: Node Sass version 6.0.1 is incompatible with ^4.0.0.如下:

 此时就是说node-sass的版本没问题,就是sass-loader版本和node-sass不匹配,需要需要重新下载sass-loader

 解决方案:

  npm  uninstall sass-loader            //卸载原本的sass-loader

 npm  install sass-loader@4.0.0      //安装4.0.0版本的

总结:启动带有scss的vue项目时,一般只会遇到两个错误

 第一: node和node-sass版本不匹配: 

       D:\桌面\音乐播放器\music-website-player\music-client\music-client\node_modules\node-sass

第二: node和node-sass版本匹配后,node-sass和sass-loader的版本不匹配:

      Node Sass version 6.0.1 is incompatible with ^4.0.0

这两个问题的解决方案如上所示

node 对应的 node-sass 部分版本号:

 

node-sass 对应的 sass-loader 部分版本号:
sass-loader 4.1.1,node-sass 4.3.0
sass-loader 7.0.3,node-sass 4.7.2
sass-loader 7.3.1,node-sass 4.7.2
sass-loader 7.3.1,node-sass 4.14.1
sass-loader 10.0.1,node-sass 6.0.1

将依赖安装到devDependencies的方法:

npm  i   axios  --save-dev        //这里的--save-dev就表示将依赖安装到devDependencies中

到此完结,谢谢

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 使用 `/deep/` 或 `::v-deep` 可以解除样式作用域限制,允许您在子组件修改父组件的样式。但是需要注意的是,`/deep/` 在 Vue 2.x 已被废弃,取而代之的是 `>>>` 或 `::v-deep`。 如果您在使用 `/deep/` 或 `::v-deep` 时报错,可能是因为您的 CSS 预处理器(如 SCSS)不支持这些选择器。这是因为 `/deep/` 或 `::v-deep` 是 Vue 特定的选择器,不是标准的 CSS 选择器。 解决方法是使用其他方法来实现样式穿透,或者尝试更新您的 CSS 预处理器版本以获得对 `/deep/` 或 `::v-deep` 的支持。例如,您可以使用以下方法来实现样式穿透: 1. 使用 `>>>` 或 `::v-deep` 代替 `/deep/`。在 Vue 2.x ,可以将 `/deep/` 替换为 `>>>` 或 `::v-deep` 来实现相同的效果。 例如,如果您想穿透到子组件修改标题的样式,可以这样写: ```scss <style lang="scss" scoped> .parent { /deep/ .child { /* 修改子组件的样式 */ } } </style> ``` 可以替换为: ```scss <style lang="scss" scoped> .parent { >>> .child { /* 修改子组件的样式 */ } } </style> ``` 2. 使用 `::v-deep` 代替 `/deep/`。在 Vue 2.x ,您还可以使用 `::v-deep` 来实现样式穿透。 例如,如果您想穿透到子组件修改标题的样式,可以这样写: ```scss <style lang="scss" scoped> .parent { /deep/ .child { /* 修改子组件的样式 */ } } </style> ``` 可以替换为: ```scss <style lang="scss" scoped> .parent ::v-deep .child { /* 修改子组件的样式 */ } </style> ``` 请注意,以上方法需要您的 CSS 预处理器支持 `>>>` 或 `::v-deep` 选择器。如果您仍然遇到问题,请检查您的 CSS 预处理器文档或更新预处理器版本以获得支持。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值