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 相关文章推荐
基于jquery的jqDnR拖拽溢出的修改
Feb 12 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
JavaScript中的原始值和复杂值
Jan 07 Javascript
Angular.js基础学习之初始化
Mar 10 Javascript
Bootstrap笔记—折叠实例代码
Mar 13 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
vue.js 使用axios实现下载功能的示例
Mar 05 Javascript
详解微信小程序开发之formId使用(模板消息)
Aug 27 Javascript
VUE中使用HTTP库Axios方法详解
Feb 05 Javascript
js前端对于大量数据的展示方式及处理方法
Dec 02 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判断浏览器的类型和语言的函数代码
2013/02/28 PHP
php使用curl存储cookie的示例
2014/03/31 PHP
Linux系统下使用XHProf和XHGui分析PHP运行性能
2015/12/08 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
详解PHP使用日期时间处理器Carbon人性化显示时间
2017/08/10 PHP
PDO::getAttribute讲解
2019/01/28 PHP
找到了一篇jQuery与Prototype并存的冲突的解决方法
2007/08/29 Javascript
javascript 短路法代码精简
2009/08/20 Javascript
JavaScript Event学习第八章 事件的顺序
2010/02/07 Javascript
15条JavaScript最佳实践小结
2013/08/09 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
2017/07/25 Javascript
JS实现图片手风琴效果
2020/04/17 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
在Django中同时使用多个配置文件的方法
2015/07/22 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
Django用户认证系统 User对象解析
2019/08/02 Python
python颜色随机生成器的实例代码
2020/01/10 Python
python入门之井字棋小游戏
2020/03/05 Python
解决python运行启动报错问题
2020/06/01 Python
python能做哪些生活有趣的事情
2020/09/09 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
Yahoo-PHP面试题4
2012/05/05 面试题
extern在函数声明中是什么意思
2014/01/19 面试题
护士的自我鉴定
2014/02/07 职场文书
捐资助学倡议书
2014/04/15 职场文书
道德与公民自我评价
2015/03/09 职场文书
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android