解决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 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
使用javascript实现Iframe自适应高度
Dec 24 Javascript
jquery操作select元素和option的实例代码
Feb 03 Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 Javascript
web前端vue filter 过滤器
Jan 12 Javascript
vue中实现移动端的scroll滚动方法
Mar 03 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
浅谈vue项目用到的mock数据接口的两种方式
Oct 09 Javascript
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
十分钟教你上手ES2020新特性
Feb 12 Javascript
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
Javascript实现打鼓效果
Jan 29 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绝对路径与相对路径之间关系的的分析
2010/03/03 PHP
php若干单维数组遍历方法的比较
2011/09/20 PHP
php引用计数器进行垃圾收集机制介绍
2012/09/19 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
PHP用FTP类上传文件视频等的简单实现方法
2016/09/23 PHP
js 新浪的一个图片播放图片轮换效果代码
2008/07/15 Javascript
Tab页界面,用jQuery及Ajax技术实现
2009/09/21 Javascript
为你的网站增加亮点的9款jQuery插件推荐
2011/05/03 Javascript
javascript向flash swf文件传递参数值注意细节
2012/12/11 Javascript
js Date概念详细介绍
2013/11/22 Javascript
javascript另类方法实现htmlencode()与htmldecode()函数实例分析
2016/11/17 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
vue Render中slots的使用的实例代码
2017/07/19 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
写给小白看的JavaScript异步
2017/11/29 Javascript
js时间戳与日期格式之间相互转换
2017/12/11 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
使用PreloadJS加载图片资源的基础方法详解
2020/02/03 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
2020/10/02 Javascript
python 查找文件夹下所有文件 实现代码
2009/07/01 Python
python Django模板的使用方法
2016/01/14 Python
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
详解python中字典的循环遍历的两种方式
2017/02/07 Python
Python列表list内建函数用法实例分析【insert、remove、index、pop等】
2017/07/24 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
python获取Linux发行版名称
2019/08/30 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
巴西购物网站:Estrela10
2018/12/13 全球购物
巴西Mr. Cat在线商店:购买包包和鞋子
2019/09/08 全球购物
毕业生自我鉴定范文
2013/11/08 职场文书
法制宣传实施方案
2014/03/13 职场文书
2016教师国培研修感言
2015/12/08 职场文书
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js