vue使用Sass时报错问题的解决方法

 更新时间:2020年10月14日 11:22:09   作者:久违°  
这篇文章主要介绍了vue使用Sass时报错问题的解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

sass:
安装:

npm config set registry https://registry.npm.taobao.org/

//sass-node报错的话,使用镜像源cnpm install node-sass sass-loader --save-dev 再安装一次
npm install node-sass --registry=https://registry.npm.taobao.org

package.json中更改sass-loader版本

"sass-loader": "^7.3.1",

使用:
页面中直接使用或者@代替src(3.x中@无需配置,2.x中需要在webpack文件中配置)
在这里插入图片描述

问题描述:
下面这个问题是我使用sass时碰见的报错:

*!!vue-style-loader!css-loader?{“sourceMap”:true}!
../../../../vue-loader/lib/style-compiler/index?{“vue”:t
rue,”id”:”data-v-570115ee”,”scoped”:false,”hasInlineConfig”:false}!../../../../vux-loader/src/after-less-loader.js!less-loader?{“so
urceMap”:true}!../../../../vux-loader/src/style-loader.js!../../../../vue-loader/lib/selector?type=style
s&index=0!./index.vue in ./node_m
odules/vux/src/components/alert
/index.vue

解决方案
此类问题一般是缺少相关依赖而导致的,对于本例,仔细看一下报错提示信息,抓住关键词,vue-style-loader!css-loader,说明是css解析的时候出了问题。
所以,解决方案就要根据情况而定,看你使用的CSS语言是什么,是常规的 或者 less 或者 sass。

1.如果 常规 中碰到,执行

npm install stylus-loader css-loader style-loader --save-dev

2.如果 less中碰到,执行

npm install less less-loader --save-dev

3.如果 sass 中碰到,执行

npm install sass sass-loader --save-dev

安装依赖就行
或者

 $npm intall sass-loader --save ; $npm install node-sass --save

如果你不知道,好吧,你三个都执行吧😀

一般只有在初始化配置的的时候才会出现这个问题,如果是已经完好的项目都会在package.json中已经配好,直接install即可。

到此这篇关于vue使用Sass时报错问题的解决方法的文章就介绍到这了,更多相关vue使用Sass报错内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue3二次封装element-ui中的table组件的过程详解

    vue3二次封装element-ui中的table组件的过程详解

    这篇文章主要给大家介绍了vue3二次封装element-ui中的table组件的过程,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友跟着小编一起来学习吧
    2024-01-01
  • 解决element ui el-row el-col里面高度不一致问题

    解决element ui el-row el-col里面高度不一致问题

    这篇文章主要介绍了解决element ui el-row el-col里面高度不一致问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • Ant Design Vue 走马灯实现单页多张图片轮播效果

    Ant Design Vue 走马灯实现单页多张图片轮播效果

    这篇文章主要介绍了Ant Design Vue 走马灯实现单页多张图片轮播,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-07-07
  • Vue-Router如何动态更改当前页url query

    Vue-Router如何动态更改当前页url query

    这篇文章主要介绍了Vue-Router如何动态更改当前页url query问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue 通过绑定事件获取当前行的id操作

    vue 通过绑定事件获取当前行的id操作

    这篇文章主要介绍了vue 通过绑定事件获取当前行的id操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • electron打包vue项目的方法 步骤

    electron打包vue项目的方法 步骤

    本文主要介绍了electron打包vue项目,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue2.0/3.0中provide和inject的用法示例

    vue2.0/3.0中provide和inject的用法示例

    provide和inject是成对出现的,主要用于父组件向子孙组件传递数据,这篇文章主要给大家介绍了关于vue2.0/3.0中provide和inject用法的相关资料,需要的朋友可以参考下
    2021-09-09
  • 详解Vue3如何加载动态菜单

    详解Vue3如何加载动态菜单

    这篇文章主要为大家详细介绍了Vue3是如何实现加载动态菜单功能的,文中的示例代码讲解详细,对我们学习Vue有一定帮助,需要的可以参考一下
    2022-07-07
  • vue3使用viewer的详细用法举例

    vue3使用viewer的详细用法举例

    viewer.js用于图片浏览的Vue组件,支持旋转、缩放、翻转等操作,这篇文章主要给大家介绍了关于vue3使用viewer的详细用法,文中通过代码介绍是非常详细,需要的朋友可以参考下
    2023-12-12
  • VueX如何实现数据共享

    VueX如何实现数据共享

    这篇文章主要介绍了VueX如何实现数据共享问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08

最新评论