svg的兩個坑

1. WebStorm 按兩下空格輸入 soft wrap 進行換行

2. 第一個坑: svg 中的 fill 屬性處理

• svg 裏面如果有 fill="",就會有顏色，可以手動去除,但是如果有很多個 svg 那麼一個個去很麻煩
• 用 svgo-loader 解決這個問題，在 vue.config.js 中配置

config.module
.use('svgo-loader').loader('svgo-loader')
.tap(options=>({
  ...options, plugins:[{
      removeAttrs:{attrs:'fill'}
    }]
  })
)
.end()

• 安裝方法

yarn add svgo-loader -D

3. 碰到問題安裝包和 node 版本不匹配

• The engine "node" is incompatible with this module. Expected version "^8.16.0 || ^10.6.0 || >=11.0.0". Got "8.12.0"
• 解決辦法用 nvm 安裝 10 版本的,升級辦法參考:https://dev.to/peterwitham/install-and-update-nodejs-on-the-mac-with-nvm-1m9j

nvm install 10

4. 提交修改

• 點 Version Control->左側飛機 icon

5. 統一管理 SCSS 變量

• 在 assets 下新建 style/helper.scss,在用的地方進行引用
• @import "~@/assets/style/helper.scss"

6. 第二個坑:引用 scss 出現下劃線

• 在 settings 裏面搜索 webpack,添加 webpack configuration file 路徑

node_modules/@vue/cli-service/webpack.config.js

• 但是還沒有解決，問題處在 svg-sprite-loader 有 bug,而 WebStorm 會進行提示，其實已經有人改了但是管理這個倉庫的 jetBrains 沒有合併,自己 folk 以下合併下 commit,再重新發布成 svg-sprite-loader-mod
• 安裝 svg-sprite-loader-mod 並且把原來的 svg-sprite-loader 刪除
• vue.config.js 中 svg-sprite-loader 的地方改成 svg-sprite-loader-mod

7. 如果有人問你遇到的最難的技術問題是什麼？

• 可以講如何解決以上這兩個問題,第二個問題過程更復雜。整個過程圖如下圖:
  

最後,個人微信,歡迎交流！