解决vue cli4升级sass-loader(v8)后报错问题


Posted in Javascript onJuly 30, 2020

sass-loader报错:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schem
a.
 - options has an unknown property 'data'. These properties are valid:
  object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
  at validate (D:\webzhijieProjects\ylvisible\node_modules\schema-utils\dist\validate.js:85:11)
  at Object.loader (D:\webzhijieProjects\ylvisible\node_modules\sass-loader\dist\index.js:36:28)

 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/vue-loa
der/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--8-oneOf-1-2!./node_modules/sass-loader/dist/cjs.js??ref-
-8-oneOf-1-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/b
ase/chart-interaction/chart-interaction.vue?vue&type=style&index=0&lang=scss& 4:14-484 14:3-18:5 15:22-492
 @ ./src/components/base/chart-interaction/chart-interaction.vue?vue&type=style&index=0&lang=scss&
 @ ./src/components/base/chart-interaction/chart-interaction.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref-
-0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/layout/rightSideBar/RightSideBar.vue?vue&type=script&lang=j
s&
 @ ./src/components/layout/rightSideBar/RightSideBar.vue?vue&type=script&lang=js&
 @ ./src/components/layout/rightSideBar/RightSideBar.vue
 @ ./src/components/layout/index.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref-
-0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/home/Home.vue?vue&type=script&lang=js&
 @ ./src/views/home/Home.vue?vue&type=script&lang=js&
 @ ./src/views/home/Home.vue

修改方法:

vue.config.js

css: {
 loaderOptions: {
  sass: {
  data: '@import "@/assets/styles/share.scss";'
  }
 }
 },

修改成

css: {
 loaderOptions: {
  sass: {
  prependData: '@import "@/assets/styles/share.scss";'
  }
 }
 },

data改成prependData

补充知识:Vue项目中使用jquery插件

1、引入jquery,并且在vue.config.js里配置

config.plugin('provide')
  .use(webpack.ProvidePlugin,
  [{
   $: 'jquery',
   jquery: 'jquery',
   jQuery: 'jquery',
   'window.jQuery': 'jquery'
  }])

2、下载hquery插件,放到public中

解决vue cli4升级sass-loader(v8)后报错问题

3、直接在组件里使用

解决vue cli4升级sass-loader(v8)后报错问题

备注:在vue里使用jquery改变样式的时候,一定要在setTimeout里调用

以上这篇解决vue cli4升级sass-loader(v8)后报错问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
css图片自适应大小
Nov 28 Javascript
网页前端优化之滚动延时加载图片示例
Jul 13 Javascript
Js可拖拽放大的层拖动特效实现方法
Feb 25 Javascript
百度地图自定义控件分享
Mar 04 Javascript
jQuery 监控键盘一段时间没输入
Apr 22 Javascript
详解百度百科目录导航树小插件
Jan 08 Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 Javascript
vue2.0之多页面的开发的示例
Jan 30 Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 Javascript
Bootstrap模态对话框中显示动态内容的方法
Aug 10 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 25 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 Javascript
基于JavaScript实现猜数字游戏代码实例
Jul 30 #Javascript
如何用JS模拟实现数组的map方法
Jul 30 #Javascript
Vue性能优化的方法
Jul 30 #Javascript
vue props default Array或是Object的正确写法说明
Jul 30 #Javascript
Vue props中Object和Array设置默认值操作
Jul 30 #Javascript
vue prop传值类型检验方式
Jul 30 #Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 #Javascript
You might like
利用PHP+JS实现搜索自动提示(实例)
2013/06/09 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(九)
2014/06/24 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
javascript 单选框,多选框美化代码
2008/08/01 Javascript
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
基于javascript实现tab选项卡切换特效调试笔记
2016/03/30 Javascript
JS判断元素是否在数组内的实现代码
2016/03/30 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
2017/03/06 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
js实现通过开始结束控制的计时器
2019/02/25 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
python基于twisted框架编写简单聊天室
2018/01/02 Python
Python基于列表list实现的CRUD操作功能示例
2018/01/05 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
Python用for循环实现九九乘法表
2018/05/31 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
简单了解python中的与或非运算
2019/09/18 Python
解决Python3.8用pip安装turtle-0.0.2出现错误问题
2020/02/11 Python
linux 下selenium chrome使用详解
2020/04/02 Python
音频处理 windows10下python三方库librosa安装教程
2020/06/20 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
蒙蒂塞罗商店:Monticello Shop
2018/11/25 全球购物
WebSphere 应用服务器都支持哪些认证
2013/12/26 面试题
软件测试工程师面试问题精选
2016/10/28 面试题
电工工作职责范本
2014/02/22 职场文书
高中学生评语大全
2014/04/25 职场文书
推荐信怎么写
2014/05/09 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
学校领导班子四风对照检查材料
2014/09/27 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
OpenFeign实现远程调用
2022/08/14 Java/Android