查看: 3269|回復: 0

[JavaScript/JQuery] Vue-cli中使用Scss全局變量

發表于 2018-5-12 08:00:02
開發環境:vue-cli 相關插件:sass-resources-loader 應用場景:在vue-cli各個組件中應用全局scss變量

先簡要介紹下今天遇到的開發內容,如下圖:

圖片描述

是一個登錄頁面,其中頭部標題需要抽離成單獨的組件以供復用,它的高度為定值,頭部以下的高度為100vh(百分百瀏覽器可視區域高度)- 頭部高度,于是有了如下代碼:

  1. <style lang="scss" scoped>
  2. .head-label {
  3. border-bottom: 1px solid #ddd;
  4. height: 3.125rem;
  5. display: flex;
  6. justify-content: center;
  7. align-items: center;
  8. font-size: 1.5rem;
  9. i {
  10. font-size: 1.6rem;
  11. position: absolute;
  12. left: .5rem;
  13. margin-top: .1875rem;
  14. }
  15. h2 {
  16. font-size: 1.5rem;
  17. }
  18. }
  19. </style>
復制代碼

我為頭部設置了固定高度加1像素的下邊框,然后計算出下面div的高度:

  1. <style lang="scss" scoped>
  2. .user-login {
  3. .main {
  4. height: calc(100vh - 3.125rem - 1px);
  5. }
  6. }
  7. </style>
復制代碼

然后問題來了,如果有一天需求變化導致我需要更改頭部高度或者下邊框的寬度,我就需要修改兩處style的數值,如果有多處style應用同一數值,做修改時必然麻煩,于是引出了今天的主題:

如何在vue-cli中應用scss全局變量?

不要著急 Let's go on

首先需要安裝一個開發插件:sass-resources-loader

  1. npm i sass-resources-loader --save-dev
復制代碼

然后修改vue-cli的build/utils.js,找到scss的加載設置:

  1. return {
  2. css: generateLoaders(),
  3. postcss: generateLoaders(),
  4. less: generateLoaders('less'),
  5. sass: generateLoaders('sass', { indentedSyntax: true }),
  6. scss: generateLoaders('sass'),
  7. stylus: generateLoaders('stylus'),
  8. styl: generateLoaders('stylus')
  9. }
復制代碼

修改為:

  1. return {
  2. css: generateLoaders(),
  3. postcss: generateLoaders(),
  4. less: generateLoaders('less'),
  5. sass: generateLoaders('sass', { indentedSyntax: true }),
  6. scss: generateLoaders('sass').concat({
  7. loader:'sass-resources-loader',
  8. options:{
  9. resources:path.resolve(__dirname,'./../src/assets/scss/base.scss')
  10. }
  11. }),
  12. stylus: generateLoaders('stylus'),
  13. styl: generateLoaders('stylus')
  14. }
復制代碼

其中path.resolve需要傳入待引入的scss文件,__dirname代表當前目錄,然后一步步找到自己的base.scss(保存后需要重啟開發命令:npm run dev)

開始食用
首先在base.scss中定義自己需要的變量

  1. $head-width:3.125rem;
  2. $border-width:1px;
復制代碼

然后在head的style中應用:

  1. <style lang="scss" scoped>
  2. .head-label {
  3. position: fixed;
  4. top: 0;
  5. border-bottom: $border-width solid #ddd;
  6. height: $head-width;
  7. display: flex;
  8. justify-content: center;
  9. align-items: center;
  10. font-size: 1.5rem;
  11. i {
  12. font-size: 1.6rem;
  13. position: absolute;
  14. left: .5rem;
  15. margin-top: .1875rem;
  16. }
  17. h2 {
  18. font-size: 1.5rem;
  19. }
  20. }
  21. </style>
復制代碼

div.main的style:

  1. <style lang="scss" scoped>
  2. .user-login {
  3. .main {
  4. margin-top: calc(#{$head-width} + #{$border-width});
  5. height: calc(100vh - #{$head-width} - #{$border-width});
  6. }
  7. }
  8. </style>
復制代碼

這里需要提一下另外一個細節,在使用css3的calc函數時,如要要插入scss的變量,需要用scss的插入法:#{變量},才能夠正常使用,否則會出錯哦!

應用效果如下:

圖片描述
圖片描述
圖片描述

不知道小伙伴們get到沒有,如果有什么疑問可以留言哦



回復

使用道具 舉報