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焦点图切换特效插件封装实例
Aug 18 Javascript
jQuery中filter()和find()的区别深入了解
Sep 25 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
AngularJS基础 ng-cloak 指令简单示例
Aug 01 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
纯javascript版日历控件
Nov 24 Javascript
微信小程序 常用工具类详解及实例
Feb 15 Javascript
老生常谈ES6中的类
Jul 31 Javascript
详解Vue2.0组件的继承与扩展
Nov 23 Javascript
微信小程序提交form操作示例
Dec 30 Javascript
vue简单练习 桌面时钟的实现代码实例
Sep 19 Javascript
微信小程序中的上拉、下拉菜单功能
Mar 13 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
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
PHP+Mysql基于事务处理实现转账功能的方法
2015/07/08 PHP
PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
2016/12/05 PHP
PHP模版引擎原理、定义与用法实例
2019/03/29 PHP
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
仿新浪微博登陆邮箱提示效果的js代码
2013/08/02 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
Sea.JS知识总结
2016/05/05 Javascript
Ionic实现页面下拉刷新(ion-refresher)功能代码
2016/06/03 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
微信小程序实现分页加载效果
2020/11/19 Javascript
python list语法学习(带例子)
2013/11/01 Python
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
Python识别快递条形码及Tesseract-OCR使用详解
2019/07/15 Python
python不同系统中打开方法
2020/06/23 Python
keras 两种训练模型方式详解fit和fit_generator(节省内存)
2020/07/03 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
HTML5中的强制下载属性download使用实例解析
2016/05/12 HTML / CSS
Html5+CSS3+EL表达式问题小结
2020/12/19 HTML / CSS
YSL圣罗兰美妆美国官网:Yves Saint Lauret US
2016/11/21 全球购物
澳大利亚领先的在线美容商城:Adore Beauty
2017/04/14 全球购物
美国汽车零部件和配件网站:CarParts
2019/03/13 全球购物
英国领先的豪华时尚家居网上商店:Amara
2019/08/12 全球购物
食品安全承诺书范文
2014/08/29 职场文书
专职安全员岗位职责
2015/04/11 职场文书
人事任命通知书
2015/04/21 职场文书
2015年采购部工作总结
2015/04/23 职场文书
2015年生产部工作总结范文
2015/05/25 职场文书
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏