vue中配置scss全局變量的步驟
在寫項目的過程中，如果用的是scss來編寫樣式代碼，常常需要定義各種變量，例如主題色、主字號之類的，因此我們會把這些變量寫到一個單獨的_variable.scss文件內(nèi)，但是每次都要在vue單文件內(nèi)引入這些變量未免太繁瑣了，所以有沒有辦法可以默認把變量文件作為全局文件進行引入呢？答案是肯定的，可以用下面的方法進行配置，可以根據(jù)當前使用的框架和環(huán)境來進行方法的選擇。
一、使用vue-cli（即vue-cli2）腳手架時
1. 首先，需要安裝一個loader，sass-resources-loader
npm install sass-resources-loader --save-dev
2. 找到build文件夾下的utils.js文件，在文件內(nèi)找到這段配置代碼
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. 重啟項目，即可在其他文件內(nèi)使用這些變量文件了
二、使用@vue/cli（即vue-cli3）腳手架時
1. 找到vue.config.js文件，如果沒有的話，則自己在根目錄新建一個即可
2. 在文件內(nèi)編寫如下代碼：
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全局變量的步驟的詳細內(nèi)容，更多關于vue配置scss全局變量的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了vue中按鈕操作完刷新頁面的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
在vue3中,?提供了一個?useAttrs?的方法它接收到的參數(shù)一?prop中可以接收到的數(shù)據(jù)是基本一樣的如果我們想自已寫一個組件,?把?elementPlus?中的期中一個組件封裝一下,這篇文章主要介紹了vue3中的useAttrs和props的區(qū)別,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue3.0 自己實現(xiàn)放大鏡效果案例講解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-07-07
在vue的使用過程中,有一個組件,幾乎是必用的,那就是router-view,它是所有組件的入口,是單頁面系統(tǒng)的一把利劍,如果你的系統(tǒng)是火箭,那么router-view無疑將是這艘火箭的北斗衛(wèi)星，本文將給大家介紹vue中的router-view組件是如何生成的,感興趣的朋友可以參考下2024-01-01
vue同一個瀏覽器登錄不同賬號數(shù)據(jù)覆蓋問題解決方案
同一個瀏覽器登錄不同賬號session一致,這就導致后面登錄的用戶數(shù)據(jù)會把前面登錄的用戶數(shù)據(jù)覆蓋掉,這個問題很常見,當前我這邊解決的就是同一個瀏覽器不同窗口只能登錄一個用戶,對vue同一個瀏覽器登錄不同賬號數(shù)據(jù)覆蓋問題解決方法感興趣的朋友一起看看吧2024-01-01
如何巧用Vue.extend繼承組件實現(xiàn)el-table雙擊可編輯(不使用v-if、v-else)
這篇文章主要給大家介紹了關于如何巧用Vue.extend繼承組件實現(xiàn)el-table雙擊可編輯的相關資料,不使用v-if、v-else,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
這篇文章主要給大家介紹了關于如何優(yōu)雅地在vue中添加權限控制的相關資料，文中通過示例代碼以及圖文介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-03-03
這篇文章主要給大家介紹了關于Vue.js實例方法之生命周期的相關資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面跟著小編一起來學習學習吧。2017-07-07
這篇文章主要介紹了Vue之vue.$set()方法源碼案例詳解,本篇文章通過簡要的案例,講解了該項技術的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-08-08
vue動態(tài)路由加載時出現(xiàn)Cannot?find?module?xxx問題
這篇文章主要介紹了vue動態(tài)路由加載時出現(xiàn)Cannot?find?module?xxx問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01