vue中配置scss全局變量的步驟
在寫項目的過程中，如果用的是scss來編寫樣式代碼，常常需要定義各種變量，例如主題色、主字號之類的，因此我們會把這些變量寫到一個單獨的_variable.scss文件內，但是每次都要在vue單文件內引入這些變量未免太繁瑣了，所以有沒有辦法可以默認把變量文件作為全局文件進行引入呢？答案是肯定的，可以用下面的方法進行配置，可以根據(jù)當前使用的框架和環(huán)境來進行方法的選擇。
一、使用vue-cli（即vue-cli2）腳手架時
1. 首先，需要安裝一個loader，sass-resources-loader
npm install sass-resources-loader --save-dev
2. 找到build文件夾下的utils.js文件，在文件內找到這段配置代碼
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
3. 修改其中的scss項，改為
scss: generateLoaders('sass').concat({
loader:'sass-resources-loader',
options:{
resources:path.resolve(__dirname,'../src/styles/_variable.scss')
}
})
4. 重啟項目，即可在其他文件內使用這些變量文件了
二、使用@vue/cli（即vue-cli3）腳手架時
1. 找到vue.config.js文件，如果沒有的話，則自己在根目錄新建一個即可
2. 在文件內編寫如下代碼：
module.exports = {
css: {
loaderOptions: {
sass: {
data: `@import "@/styles/_variable.scss";`
}
}
}
}
3. 重啟項目，即可使用
注意：如果編寫完以上代碼，重啟項目后出現(xiàn)這個錯誤：
Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
那么說明，你安裝的sass-loader應該是V8的版本，可以在package.json中查看是否確實如此，如果的確是v8版本以上，則需要配置不同的寫法，因為在V8中已經(jīng)廢除了data這個配置項，改為了prependData，具體可以在vue cli官網(wǎng)中看到此說明?！?a target="_blank" rel="external nofollow" >傳送門】
因此，我們需要將配置代碼修改成如下樣式：
css: {
loaderOptions: {
sass: {
prependData: `@import "~@/styles/_variable.scss";`
}
}
}
好了，重啟一下項目，大功告成。
以上就是vue中配置scss全局變量的步驟的詳細內容，更多關于vue配置scss全局變量的資料請關注腳本之家其它相關文章！
相關文章
Vue中的el-date-picker時間選擇器的使用實例詳解
el-date-picker是Element UI框架中提供的日期選擇器組件,它支持單個日期、日期范圍、時間、日期時間等多種選擇方式,本文給大家介紹Vue中的el-date-picker時間選擇器的使用,感興趣的朋友一起看看吧2023-10-10
這篇文章主要為大家介紹了vue前端實現(xiàn)打印下載示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
解決vue項目中遇到 Cannot find module ‘chalk‘ 報錯的問題
這篇文章主要介紹了解決vue項目中遇到 Cannot find module ‘chalk‘ 報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要為大家介紹了Vue中request.js封裝及調用示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
vue中使用pdfjs-dist?+?turnjs實現(xiàn)頁面的翻書瀏覽功能
這篇文章主要介紹了vue中使用pdfjs-dist?+?turnjs實現(xiàn)頁面的翻書瀏覽,通過本文學習我們知道了pdfjs-dist 的工作原理是把獲取到的 pbf 的文件的數(shù)據(jù)流， 利用 canvas轉換成圖片，本文通過實例代碼詳解講解，需要的朋友可以參考下2022-10-10
這篇文章主要介紹了Vue列表循環(huán)從指定下標開始的多種方案,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
vue3組合API中setup、 ref、reactive的使用大全
本文給大家介紹vue3組合API中setup、 ref、reactive的用法，初步了解reactive的使用及具體用法，通過示例代碼給大家介紹的非常詳細，需要的朋友參考下吧2021-06-06
使用vuex解決刷新頁面state數(shù)據(jù)消失的問題記錄
這篇文章主要介紹了使用vuex解決刷新頁面state數(shù)據(jù)消失的問題記錄，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
這篇文章主要介紹了Vue樹表格分頁的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-10-10
這篇文章主要介紹了Vue開發(fā)Html5微信公眾號的步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04