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滑动门代码
Dec 19 Javascript
JQuery里面的几种选择器 查找满足条件的元素$("#控件ID")
Aug 23 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
AngularJS基础 ng-src 指令简单示例
Aug 03 Javascript
详解Jquery Easyui的验证扩展
Jan 09 Javascript
JavaScript模块化之使用requireJS按需加载
Apr 12 Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 Javascript
JavaScript实现三级级联特效
Nov 05 Javascript
JS函数节流和函数防抖问题分析
Dec 18 Javascript
微信小程序实现顶部下拉菜单栏
Nov 04 Javascript
vue中如何实现后台管理系统的权限控制的方法步骤
Sep 05 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 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
Yii2中设置与获取别名的函数(setAlias和getAlias)用法分析
2016/07/25 PHP
浅谈php和js中json的编码和解码
2016/10/24 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
laravel + vue实现的数据统计绘图(今天、7天、30天数据)
2018/07/31 PHP
NiftyCube——轻松实现圆角边框
2007/02/20 Javascript
JS继承 笔记
2011/07/13 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
jquery制作居中遮罩层效果分享
2014/02/21 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
理解javascript定时器中的setTimeout与setInterval
2016/02/23 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
JavaScript常见事件处理程序实例总结
2019/01/05 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
jQuery 隐藏/显示效果函数用法实例分析
2020/05/20 jQuery
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
Python之pandas读写文件乱码的解决方法
2018/04/20 Python
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
python dataframe 输出结果整行显示的方法
2018/06/14 Python
Python实现注册、登录小程序功能
2018/09/21 Python
修改 CentOS 6.x 上默认Python的方法
2019/09/06 Python
python kafka 多线程消费者&手动提交实例
2019/12/21 Python
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
教师通用专业自荐书范文
2014/02/11 职场文书
超市店长竞聘书
2015/09/15 职场文书
600字作文之感受大自然
2019/11/27 职场文书
前端学习——JavaScript原生实现购物车案例
2021/03/31 Javascript
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python
欧元符号 €
2022/02/17 杂记
python中的getter与setter你了解吗
2022/03/24 Python