解决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 相关文章推荐
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 Javascript
jQuery的三种$()
Dec 30 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
Jun 25 Javascript
js中reverse函数的用法详解
Dec 26 Javascript
浅谈Jquery中Ajax异步请求中的async参数的作用
Jun 06 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
Dec 23 Javascript
JS中闭包的经典用法小结(2则示例)
Dec 28 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
Apr 26 Javascript
微信小程序云开发实现云数据库读写权限
May 17 Javascript
vue实现选中效果
Oct 07 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 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
阿拉伯的咖啡与水烟
2021/03/03 咖啡文化
动态生成gif格式的图像要注意?
2006/10/09 PHP
使用PHP编写的SVN类
2013/07/18 PHP
php中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
php 启动报错如何解决
2014/01/17 PHP
php文件缓存类汇总
2014/11/21 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
最准确的php截取字符串长度函数
2015/10/29 PHP
Laravel 加载第三方类库的方法
2018/04/20 PHP
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
NodeJS连接MongoDB数据库时报错的快速解决方法
2016/05/13 NodeJs
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
使用vue-resource进行数据交互的实例
2017/09/02 Javascript
Koa2微信公众号开发之本地开发调试环境搭建
2018/05/16 Javascript
vue中导出Excel表格的实现代码
2018/10/18 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
2018/11/13 Javascript
JS实现判断数组是否包含某个元素示例
2019/05/24 Javascript
优雅的使用javascript递归画一棵结构树示例代码
2019/09/22 Javascript
[03:18]DOTA2放量测试专访820:希望玩家加入国服大家庭
2013/08/25 DOTA
[05:07]DOTA2英雄梦之声_第14期_暗影恶魔
2014/06/20 DOTA
python中__call__内置函数用法实例
2015/06/04 Python
解决Python3下map函数的显示问题
2019/12/04 Python
Python中os模块功能与用法详解
2020/02/26 Python
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
Wojas罗马尼亚网站:波兰皮鞋品牌
2018/11/01 全球购物
函授本科毕业生自我鉴定
2013/10/16 职场文书
高二政治教学反思
2014/02/01 职场文书
通用自荐信范文
2014/03/14 职场文书
大学优秀班集体申报材料
2014/05/23 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
2014年化验室工作总结
2014/11/21 职场文书
思品教学工作总结
2015/08/10 职场文书
运动会跳远广播稿
2015/08/19 职场文书
Javascript中Microtask和Macrotask鲜为人知的知识点
2022/04/02 Javascript