解決vue cli4升級(jí)sass-loader(v8)后報(bào)錯(cuò)問(wèn)題
sass-loader報(bào)錯(cuò):
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
補(bǔ)充知識(shí):Vue項(xiàng)目中使用jquery插件
1、引入jquery,并且在vue.config.js里配置
config.plugin('provide')
.use(webpack.ProvidePlugin,
[{
$: 'jquery',
jquery: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}])
2、下載hquery插件,放到public中

3、直接在組件里使用

備注:在vue里使用jquery改變樣式的時(shí)候,一定要在setTimeout里調(diào)用
以上這篇解決vue cli4升級(jí)sass-loader(v8)后報(bào)錯(cuò)問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue2中前端實(shí)現(xiàn)語(yǔ)音播報(bào)的詳細(xì)過(guò)程
vue中語(yǔ)音播報(bào),目前本人寫的過(guò)程中,遇到了兩種情況,第一種是后端直接返回一個(gè)mp3的播放url,第二種就是播報(bào)的內(nèi)容需要前端自己拼接的,關(guān)于兩種方法,我都說(shuō)一下如何實(shí)現(xiàn),感興趣的朋友一起看看吧2024-07-07
一文詳解Pinia和Vuex與兩個(gè)Vue狀態(tài)管理模式
這篇文章主要介紹了一文詳解Pinia和Vuex與兩個(gè)Vue狀態(tài)管理模式,Pinia和Vuex一樣都是是vue的全局狀態(tài)管理器。其實(shí)Pinia就是Vuex5,只不過(guò)為了尊重原作者的貢獻(xiàn)就沿用了這個(gè)看起來(lái)很甜的名字Pinia2022-08-08
vue3生命周期原理與生命周期函數(shù)簡(jiǎn)單應(yīng)用實(shí)例分析
這篇文章主要介紹了vue3生命周期原理與生命周期函數(shù),結(jié)合簡(jiǎn)單實(shí)例形式分析了vue3的生命周期基本原理、以及各個(gè)階段的生命周期鉤子函數(shù)功能、使用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2023-04-04
vue基于兩個(gè)計(jì)算屬性實(shí)現(xiàn)選中和全選功能示例
這篇文章主要介紹了vue基于兩個(gè)計(jì)算屬性實(shí)現(xiàn)選中和全選功能,結(jié)合實(shí)例形式分析了vue計(jì)算屬性get及set操作頁(yè)面元素實(shí)現(xiàn)選中與全選功能相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
vue頁(yè)面切換過(guò)渡transition效果
這篇文章主要介紹了vue頁(yè)面切換過(guò)渡transition效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10
Vue.js實(shí)現(xiàn)輸入框清空功能的兩種方式
Vue.js 是一個(gè)流行的前端框架,它提供了多種方法來(lái)實(shí)現(xiàn)數(shù)據(jù)的雙向綁定和事件處理,在構(gòu)建表單時(shí),我們經(jīng)常需要實(shí)現(xiàn)清空輸入框的功能,本文將介紹兩種在Vue中實(shí)現(xiàn)輸入框清空功能的方法,感興趣的小伙伴跟著小編一起來(lái)看看吧2024-12-12

