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


Posted in Javascript onOctober 14, 2020

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文件中配置)
vue使用Sass时报错问题的解决方法

问题描述:
下面这个问题是我使用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报错内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
起点页面传值js,有空研究学习下
Jan 25 Javascript
用Javascript实现Sleep暂停功能代码
Sep 03 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
Jan 29 Javascript
Backbone.js的Hello World程序实例
Jun 19 Javascript
基于jquery步骤进度条源码分享
Nov 12 Javascript
JavaScript中使用数组方法汇总
Feb 16 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
零基础轻松学JavaScript闭包
Dec 30 Javascript
微信小程序网络请求wx.request详解及实例
May 18 Javascript
layui的table单击行勾选checkbox功能方法
Aug 14 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
Nov 28 Javascript
简单了解TypeScript中如何继承 Error 类
Jun 21 Javascript
JavaScript原生数组函数实例汇总
Oct 14 #Javascript
如何通过JS实现日历简单算法
Oct 14 #Javascript
浅谈js数组splice删除某个元素爬坑
Oct 14 #Javascript
如何使用JS console.log()技巧提高工作效率
Oct 14 #Javascript
JavaScript Blob对象原理及用法详解
Oct 14 #Javascript
基于javascript原生判断DOM是否加载完毕
Oct 14 #Javascript
JavaScript常用进制转换及位运算实例解析
Oct 14 #Javascript
You might like
php购物网站支付paypal使用方法
2010/11/28 PHP
PHP变量的定义、可变变量、变量引用、销毁方法
2013/12/20 PHP
PHP ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
js中匿名函数的N种写法
2010/09/08 Javascript
jQuery 源码分析笔记(2) 变量列表
2011/05/28 Javascript
一行代码告别document.getElementById
2012/06/01 Javascript
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
js读写json文件实例代码
2014/10/21 Javascript
jQuery进行组件开发完整实例
2015/12/15 Javascript
详解AngularJS中自定义过滤器
2015/12/28 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
jQuery序列化表单成对象的简单实现
2016/11/29 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
chorme 浏览器记住密码后input黄色背景处理方法(两种)
2017/11/22 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
koa中间件核心(koa-compose)源码解读分析
2020/06/15 Javascript
Python爬虫框架Scrapy实例代码
2018/03/04 Python
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
python查看数据类型的方法
2019/10/12 Python
Python实现手机号自动判断男女性别(实例解析)
2019/12/22 Python
python 牛顿法实现逻辑回归(Logistic Regression)
2020/10/15 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
Harrods美国:英国最大的百货公司
2018/11/04 全球购物
草莓网官网:StrawberryNET
2019/08/21 全球购物
2014年单位植树节活动方案
2014/03/23 职场文书
2014社区三八妇女节活动方案
2014/03/30 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
房贷工资证明范本
2015/06/12 职场文书