vue中配置scss全域性變數的步驟
阿新 • • 發佈:2020-12-30
在寫專案的過程中,如果用的是scss來編寫樣式程式碼,常常需要定義各種變數,例如主題色、主字號之類的,因此我們會把這些變數寫到一個單獨的_variable.scss檔案內,但是每次都要在vue單檔案內引入這些變數未免太繁瑣了,所以有沒有辦法可以預設把變數檔案作為全域性檔案進行引入呢?答案是肯定的,可以用下面的方法進行配置,可以根據當前使用的框架和環境來進行方法的選擇。
一、使用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. 重啟專案,即可使用
注意:如果編寫完以上程式碼,重啟專案後出現這個錯誤:
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中已經廢除了data這個配置項,改為了prependData,具體可以在vue cli官網中看到此說明。【傳送門】
因此,我們需要將配置程式碼修改成如下樣式:
css: { loaderOptions: { sass: { prependData: `@import "~@/styles/_variable.scss";` } } }
好了,重啟一下專案,大功告成。
以上就是vue中配置scss全域性變數的步驟的詳細內容,更多關於vue配置scss全域性變數的資料請關注我們其它相關文章!