vue-cli 3.0 與 framework7 的一個 css 問題

發現問題

看到 vue-cli3 和 framework7 都升級到3.0了,團隊打算用新版本作些新東西.
有 https://github.com/framework7... 和 vue-cli3 中文文檔的加成, 開始還算順利, npm run serve 也能把項目跑起來. 可是 npm run build 打包的時候發生問題了. 報錯以下:

ERROR  Error: CSS minification error: Parse error on line 1:
8px + constant(safe-area-i
        ------^
Expecting 'SUB', 'LPAREN', 'NESTED_CALC', 'NUMBER', 'CSS_VAR', 'LENGTH', 'ANGLE', 'TIME', 'FREQ', 'RES', 'EMS', 'EXS', 'CHS', 'REMS', 'VHS', 'VWS', 'VMINS', 'VMAXS', 'PERCENTAGE', got 'PREFIX'. File: chunk-vendors.842c282c.css
Error: CSS minification error: Parse error on line 1:
8px + constant(safe-area-i
------^
Expecting 'SUB', 'LPAREN', 'NESTED_CALC', 'NUMBER', 'CSS_VAR', 'LENGTH', 'ANGLE', 'TIME', 'FREQ', 'RES', 'EMS', 'EXS', 'CHS', 'REMS', 'VHS', 'VWS', 'VMINS', 'VMAXS', 'PERCENTAGE', got 'PREFIX'. File: chunk-vendors.842c282c.css
    at D:\work\mobile3\node_modules\@intervolga\optimize-cssnano-plugin\index.js:106:21
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! mobile3@0.1.0 build: `vue-cli-service build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the mobile3@0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\zz\AppData\Roaming\npm-cache\_logs\2018-08-16T05_07_51_763Z-debug.log

分析問題

首先觀察這是一個 CSS minification 的報錯, 說是 calc 函數沒有收到正確的值.
再以報錯信息 8px + constant(safe-area-i 搜索 f7 的 css 文件 發現不少這樣的代碼:

padding-left: calc(8px + constant(safe-area-inset-right));
padding-left: calc(8px + env(safe-area-inset-right));

而後搜索 safe-area-inset-right, 發現這是一個 iPhone X (有文章: http://www.css88.com/archives... )的屬性, 做用是用來解決iPhone X 額頭的凹槽帶來的問題.
再以 constant 爲關鍵字去搜索 vue-cli3 的issue.
https://github.com/vuejs/vue-... 尤大表示是 cssnano 的問題
https://github.com/framework7... framework7 的做者表示這是 ios 必須的, 不是個人錯, 請向 cssnano 提出問題.
https://github.com/cssnano/cs... cssnano 說 safe-area-inset-right 這個屬性是非標準的, 是蘋果 iPhone x 私有的, 並且也不是個人鍋, 你看看 reduce-css-calc 吧
https://github.com/MoOx/reduc... reduce-css-calc 表示知道,但沒有解決

總結一下, f7 使用了一個iPhone x 專用的非標準 css 屬性, 致使 cssnano 中一個處理 calc 的小插件標錯.

解決問題

取消使用calc插件 (失敗)

首先想到的是取消 cssnano 中這個小插件的使用, 首先嚐試修改 node_modules/@vue/cli-service/lib/config/css.js 中的 cli 配置文件將下面一段所有註釋掉

webpackConfig
        .plugin('optimize-css')
          .use(require('@intervolga/optimize-cssnano-plugin'), [{
            sourceMap: options.productionSourceMap && sourceMap,
            cssnanoOptions: cssProcessorOptions
          }])

嘗試註釋掉整個 cssnano, 發現 npm run build 能夠經過, css未壓縮.
而後看能不能只取消 calc 插件的使用, 看 https://cssnano.co/ cssnano 官網, npm, github, 愣是沒找到完整的參數配置說明, 只有 https://cssnano.co/guides/pre... 中的簡單介紹和示例, 在 cli 的配置文件中嘗試設置 calc:false 也沒有用,這個方法失敗.

用複製文件的方法臨時解決 (成功)

取消使用行不通只能等 cssnano 的大神再看看了,畢竟iPhone用戶那麼多,總會解決的.可是項目不等人,考慮到即使這個插件更新了也還要等 vue-cli 更新,打算先找個臨時解決方法.
考慮了一下, 官方示例是在 main.js 中引用 css文件的, 因此css 要通過優化處理. 可是 f7 官方其實提供了 framework7.min.css 這樣的文件, 徹底能夠不通過咱們的優化處理直接使用,因此嘗試直接在 index.html 中引用 css 文件.首先考慮直接把 css 文件拿出來放到 public 目錄, 可是以爲不妥, 一方面這個 css 文件放入版本管理有些沒必要要, 另外一方面每次 f7 更新都要記得本身去更新這個文件很麻煩, 因此參考官方文檔 https://cli.vuejs.org/zh/config/#chainwebpack 的語法修改 webpack 配置,用 copy 插件把文件拷貝出來
代碼以下:

// vue.config.js
const path = require('path');
module.exports = {
  chainWebpack: config => {
    config
      .plugin('copy-f7-css')
      .use(require('copy-webpack-plugin'), [[{
        from: path.resolve(__dirname,'./node_modules/framework7/css/framework7.min.css'),
        to: path.resolve(__dirname,'./dist/css'),
      }]])
  }
}

同時把 main.js 裏的 f7 的 css 引用註釋掉.
執行 npm run build 問題解決.
只是之後咱們本身想使用 safe-area-inset- 這樣的屬性還會形成錯誤的, 因此不算正真地解決了這個問題, 不過只能先這樣解決了.