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 相关文章推荐
自动生成文章摘要的代码[JavaScript 版本]
Mar 20 Javascript
Prototype 工具函数 学习
Jul 23 Javascript
javascript 获取url参数和script标签中获取url参数函数代码
Jan 22 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
Oct 21 Javascript
Javascript中的Array数组对象详谈
Mar 03 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 Javascript
js对字符的验证方法汇总
Feb 04 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
Oct 11 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
Jun 10 Javascript
JavaScript运动原理基础知识详解
Apr 02 Javascript
javascript实现文字跑马灯效果
Jun 18 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
Jul 01 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学习之 循环结构实现代码
2011/06/09 PHP
深入掌握include_once与require_once的区别
2013/06/17 PHP
php获取指定范围内最接近数的方法
2015/06/02 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
jQuery 1.0.2
2006/10/11 Javascript
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
nodejs通过phantomjs实现下载网页
2015/05/04 NodeJs
详解JavaScript函数对象
2015/11/15 Javascript
理解javascript闭包
2015/12/15 Javascript
jQuery基于Ajax实现读取XML数据功能示例
2018/05/31 jQuery
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
Vue在页面数据渲染完成之后的调用方法
2018/09/11 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
jQuery - AJAX load() 实例用法详解
2019/08/27 jQuery
JavaScript自动生成 年月范围 选择功能完整示例【基于jQuery插件】
2019/09/03 jQuery
a标签调用js的方法总结
2019/09/05 Javascript
vant-ui AddressEdit地址编辑和van-area的用法说明
2020/11/03 Javascript
python实现apahce网站日志分析示例
2014/04/02 Python
Python元组操作实例分析【创建、赋值、更新、删除等】
2017/07/24 Python
Python TestCase中的断言方法介绍
2019/05/02 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
python 爬取腾讯视频评论的实现步骤
2021/02/18 Python
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
阿迪达斯芬兰官方网站:adidas芬兰
2017/01/30 全球购物
越南综合购物网站:Lazada越南
2019/06/10 全球购物
职工运动会邀请函
2014/02/02 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
结婚通知短信怎么写
2015/04/17 职场文书
体检通知范文
2015/04/21 职场文书
2019思想汇报范文
2019/05/21 职场文书
Java 超详细讲解ThreadLocal类的使用
2022/04/07 Java/Android
vue实现Toast组件轻提示
2022/04/10 Vue.js