解决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 相关文章推荐
Jquery实现弹出层分享微博插件具备动画效果
Apr 03 Javascript
js判断undefined类型示例代码
Feb 10 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
May 28 Javascript
jquery easyui如何实现格式化列
Jul 30 jQuery
用Vue.extend构建消息提示组件的方法实例
Aug 08 Javascript
js合并两个数组生成合并后的key:value数组
May 09 Javascript
vue组件name的作用小结
May 23 Javascript
vue 自动化路由实现代码
Sep 03 Javascript
通过实例了解JS 连续赋值
Sep 24 Javascript
TS 类型收窄教程示例详解
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 calender(日历)二个版本代码示例(解决2038问题)
2013/12/24 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
PHP解压tar.gz格式文件的方法
2016/02/14 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
JavaScript控制Session操作方法
2013/01/17 Javascript
javascript根据像素点取位置示例
2014/01/27 Javascript
Jquery Ajax方法传值到action的方法
2014/05/11 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
浅析JS原型继承与类的继承
2016/04/07 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
判断JavaScript中的两个变量是否相等的操作符
2019/12/21 Javascript
JS数组进阶示例【数组的几种函数用法】
2020/01/16 Javascript
node.js中fs文件系统模块的使用方法实例详解
2020/02/13 Javascript
Python实现方便使用的级联进度信息实例
2015/05/05 Python
Python selenium如何设置等待时间
2016/09/15 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
Django实现一对多表模型的跨表查询方法
2018/12/18 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
使用python绘制温度变化雷达图
2019/10/18 Python
在python3中实现更新界面
2020/02/21 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
python Matplotlib模块的使用
2020/09/16 Python
详解html5 shiv.js和respond.min.js
2018/01/24 HTML / CSS
Lookfantastic葡萄牙官方网站:欧洲第一大化妆品零售商
2018/03/17 全球购物
学前教育毕业生自荐信
2013/10/29 职场文书
教师党性分析材料
2014/02/04 职场文书
公司接待方案
2014/03/08 职场文书
就业协议书怎么填
2014/04/11 职场文书
建筑安全标语
2014/06/07 职场文书
Django展示可视化图表的多种方式
2021/04/08 Python
python代码实现备忘录案例讲解
2021/07/26 Python
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android